✅ Installation Command:
npm install react-router-dom
<BrowserRouter>
– Wraps the application to enable routing.<Routes>
– Contains all route definitions.<Route>
– Defines each page’s path and component.<Link>
– Used for navigation instead of <a>
tags.📌 Example: Basic Routing Setup (App.js
)
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Now, create separate components for each route.
📌 Example: Home.js
import React from "react";
function Home() {
return <h2>Welcome to the Home Page</h2>;
}
export default Home;
📌 Example: About.js
import React from "react";
function About() {
return <h2>About Us Page</h2>;
}
export default About;
<Link>
Instead of using traditional <a>
tags, React Router provides the <Link>
component for smooth navigation.
📌 Example: Adding Navigation in App.js
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link> | <Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Sometimes, we need to pass dynamic values in the URL, like a product ID or username.
📌 Example: User.js
Component (Dynamic Route)
import React from "react";
import { useParams } from "react-router-dom";
function User() {
const { username } = useParams();
return <h2>Welcome, {username}!</h2>;
}
export default User;
Updating App.js
to Handle Dynamic Routes
import User from "./User";
<Routes>
<Route path="/user/:username" element={<User />} />
</Routes>
http://localhost:3000/user/Zia
A 404 page is shown when a user visits an invalid URL.
📌 Example: NotFound.js
Component
import React from "react";
function NotFound() {
return <h2>404 - Page Not Found</h2>;
}
export default NotFound;
Adding a 404 Page in App.js
import NotFound from "./NotFound";
<Routes>
<Route path="*" element={<NotFound />} />
</Routes>
Navigate
Component)If you need to redirect users from one page to another, use <Navigate>
.
📌 Example: Redirect from Old Page to New Page
import { Navigate } from "react-router-dom";
function OldPage() {
return <Navigate to="/newpage" />;
}
In real-world apps, some pages should only be accessible to logged-in users.
📌 Example: Protected Route Setup
import { Navigate } from "react-router-dom";
function ProtectedRoute({ isLoggedIn, children }) {
return isLoggedIn ? children : <Navigate to="/" />;
}
Using the Protected Route in App.js
<Routes>
<Route
path="/dashboard"
element={<ProtectedRoute isLoggedIn={false}><Dashboard /></ProtectedRoute>}
/>
</Routes>
<BrowserRouter>
, <Routes>
, <Route>
, and <Link>
for navigation.Mastering React Router DOM helps in creating professional, dynamic, and user-friendly applications! 🚀