React Router v6: nested route, Outlet và loader/action (data router)?

⚡ Trả lời nhanh

Route lồng nhau render qua `<Outlet />` của route cha. Với data router (`createBrowserRouter`, v6.4+), `loader` lấy dữ liệu trước khi render route, `action` xử lý form submit; đọc bằng `useLoaderData`, tránh waterfall useEffect-fetch.

const router = createBrowserRouter([
  {
    path: "/", element: <Layout />, errorElement: <ErrorPage />,
    children: [
      { index: true, element: <Home /> },
      {
        path: "users/:id",
        loader: ({ params }) => fetchUser(params.id),
        element: <User />,
      },
    ],
  },
]);
// Layout chứa <Outlet />; User dùng: const user = useLoaderData();
<RouterProvider router={router} />

Loader của các route lồng nhau chạy song song.
<Form method="post"> gọi action, sau đó router tự revalidate loader.
useNavigation().state cho trạng thái loading; defer (v6) / Await để stream phần chậm.
Điều hướng bằng <Link>/useNavigate, không dùng <a href> (reload trang).