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>} />
Previous