npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users">Users</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

import { Link, NavLink, useNavigate } from 'react-router-dom';

// Link - basic navigation
<Link to="/about">About</Link>

// NavLink - active styling
<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
  About
</NavLink>

// Programmatic navigation
function Form() {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // Navigate after action
    navigate('/success');
    navigate(-1);  // Go back
  };
}

// Define dynamic route
<Route path="/users/:id" element={<UserDetail />} />;

// Access params
import { useParams } from "react-router-dom";

function UserDetail() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

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

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("q");

  return (
    <input
      value={query || ""}
      onChange={(e) => setSearchParams({ q: e.target.value })}
    />
  );
}
// URL: /search?q=react

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>;

// Dashboard component with Outlet
import { Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}