13. Routing with React Router

import { createBrowserRouter, RouterProvider, Link, NavLink, Outlet, useParams, useNavigate } from "react-router";

const router = createBrowserRouter([
  {
    path: "/", element: <Layout />, errorElement: <ErrorPage />,
    children: [
      { index: true, element: <Home /> },
      { path: "orders", element: <Orders /> },
      { path: "orders/:id", element: <OrderDetails />, loader: ({ params }) => fetchOrder(params.id) },
      { path: "admin", element: <RequireAuth><Admin /></RequireAuth> },
      { path: "*", element: <NotFound /> },
    ],
  },
]);

function Layout() { return <><nav><NavLink to="/orders">Orders</NavLink></nav><Outlet /></>; }
function OrderDetails() { const { id } = useParams(); const navigate = useNavigate(); /* ... */ }

createRoot(document.getElementById("root")).render(<RouterProvider router={router} />);