React Router v6

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link, NavLink,
         useParams, useNavigate, Outlet } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/"        element={<Home />} />
        <Route path="/about"   element={<About />} />
        <Route path="/users"   element={<UsersLayout />}>
          <Route index         element={<UserList />} />   {/* /users */}
          <Route path=":id"    element={<UserDetail />} /> {/* /users/42 */}
        </Route>
        <Route path="*"        element={<NotFound />} />   {/* 404 */}
      </Routes>
    </BrowserRouter>
  );
}

// Nested layout with Outlet
function UsersLayout() {
  return (
    <div>
      <h2>Users Section</h2>
      <Outlet />  {/* renders UserList or UserDetail */}
    </div>
  );
}

// URL params
function UserDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  return (
    <div>
      <p>User ID: {id}</p>
      <button onClick={() => navigate(-1)}>Go Back</button>
    </div>
  );
}

// Navigation
function Nav() {
  return (
    <nav>
      <NavLink to="/"      className={({ isActive }) => isActive ? "active" : ""}>Home</NavLink>
      <NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>About</NavLink>
      <NavLink to="/users" className={({ isActive }) => isActive ? "active" : ""}>Users</NavLink>
    </nav>
  );
}