About Lesson
React Router:
React Router is used to handle navigation in React applications. It allows switching between pages (routes) without reloading the page.
Install React Router:
Run the following command in your project:
npm install react-router-dom
Example:
JavaScript
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
function App() {
return (
< BrowserRouter >
<nav>
<Link to="/">Home</Link> |
<Link to="/about">About</Link> |
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</ BrowserRouter >
);
}
export default App;
Navigating Using useNavigate Hook:
JavaScript
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
const goToContact = () => {
navigate("/contact");
};
return (
<div>
<h2>Home Page</h2>
<button onClick={goToContact}>Go to Contact</button>
</div>
);
}
export default Home;
Dynamic Routing:
You can pass parameters in the URL like /profile/:id.
App.js
<Route path="/profile/:id" element={<Profile />} />Profile.js
JavaScript
import { useParams } from "react-router-dom";
function Profile() {
const { id } = useParams();
return <h2>Profile Page - User ID: {id}</h2>;
}
export default Profile;
Redirecting Users (Navigate):
If a user tries to access a non-existing page, you can redirect them.
Example:
JavaScript
import { Navigate } from "react-router-dom";
function NotFound() {
return <Navigate to="/" />;
}
Protecting Routes (Authentication):
If you want to restrict access to a route, use a Protected Route.
ProtectedRoute.js:
JavaScript
import { Navigate } from "react-router-dom";
function ProtectedRoute({ children }) {
const isAuthenticated = false; // Change this based on auth state
return isAuthenticated ? children : <Navigate to="/" />;
}
export default ProtectedRoute;
Using ProtectedRoute:
JavaScript
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />