React Router Dom Setup In React App

React Router DOM(V6)
It is a powerful routing library that enables navigation between different pages in a React application without refreshing the browser. It helps developers build single-page applications (SPA) by connecting URLs with React components efficiently. Using React Router DOM improves user experience by providing fast, smooth page transitions. It is an essential tool for structuring and scaling modern React JS projects.

Features of Auto Dismiss Alert Functionality

Manages alert state centrally in App.js for consistent behavior across components.

Automatically dismisses alerts after 2 seconds using setTimeout.

Displays dynamic alert messages with different alert types (success, warning, etc.).

Renders alerts conditionally based on React state to keep the UI clean.

Provides instant user feedback for actions like enabling dark or light mode.

Install React Router DOM

To use routing features in a React application, you first need to install the React Router DOM package. This library helps in managing navigation and page routing without refreshing the browser.

npm install react-router-dom

Import React Router DOM Library

After installation, you need to import the required components from react-router-dom. These components help define routes and control navigation inside your React application.

import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";

Import Link for Navigation

The Link component is used to navigate between pages without reloading the application. It provides a smooth and fast user experience similar to traditional anchor tags.

import { Link } from "react-router-dom";

App.JS Code:-

import { useState } from "react";
import "./App.css";
import About from "./components/About";
import Navbar from "./components/Navbar";
import TestForm from "./components/TestForm";
import Alert from "./components/Alert";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  const [mode, setmode] = useState("light");

  const [alert, setAlert] = useState(null);

  let showAlert = (message, type) => {
    setAlert({
      msg: message,
      type: type,
    });
    setTimeout(() => {
      setAlert(null);
    }, 2000);
  };

  let togglemode = () => {
    if (mode === "light") {
      setmode("dark");
      document.body.style.backgroundColor = "black";
      showAlert("Dark Mode is Enabled!", "success");
      document.title = "Royal Text | Dark Mode Enabled";
    } else {
      setmode("light");
      document.body.style.backgroundColor = "white";
      showAlert("Light Mode is Enabled!", "success");
      document.title = "Royal Text | Light Mode Enabled";
    }
  };

  return (
    <>
      <Router>
        <Navbar
          name="The Royal Text"
          about_us="About us Text"
          mode={mode}
          togglemode={togglemode}
        />

        <Alert alert={alert} />

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" />

          <Route
            path="/testform"
            element={
              <TestForm
                heading="Enter text to analyze"
                mode={mode}
                showAlert={showAlert}
              />
            }
          ></Route>
        </Routes>
      </Router>
    </>
  );
}

export default App;

TestForm.JS Code:-

import React from "react";
import { Link } from "react-router-dom";

export default function Navbar(props) {
  return (
    <>
      <nav
        className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
      >
      
        {/* Template Literal Expression= ${} */}
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
            {props.name}
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="/">
                  Home
                </a>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/testform">
                  Convert Text
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/about">
                  {props.about_us}
                </Link>
              </li>

            </ul>
            <div
              className={`form-check form-switch text-${
                props.mode === "light" ? "dark" : "light"
              }`}
            >
              <input
                className="form-check-input"
                type="checkbox"
                onClick={props.togglemode}
                role="switch"
                id="switchCheckDefault"
              />
              <label className="form-check-label" htmlFor="switchCheckDefault">
                Enable Dark Mode
              </label>
            </div>
          </div>
        </div>
      </nav>
    </>
  );
}

Features and Changes in Above Code:-

Changes & Requirements After Adding React Router DOM

Installed and imported React Router DOM to enable client-side routing in the React application.

Wrapped the entire app inside BrowserRouter (Router) in App.js to activate routing support.

Replaced page-based navigation with Routes and Route components to define different URLs and their respective components.

Configured separate routes for Home, About, and TestForm without page reloads.

Used Link component instead of anchor (<a>) tags in Navbar.js for smooth navigation.

Maintained global state (dark/light mode and alerts) in App.js and passed it via props across routes.

All other component files remain unchanged, as React Router DOM only affects navigation and routing logic.