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.