Regarding how to elegantly redirect in createBrowserRouter

[bmcswrdd5977]

So, in latest documentation.We can

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

But actually, we need redirect at most.
When we are in '/', it will be redirect to '/task' or '/list'.
Maybe can we add a redirect key in RouteObject for redirect?
Or already has methods for something else to implement this?

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    redirect: '/team',
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

I known something like this <Navigate to="/task/new" replace />, but i don't known how to use in this example.
Can somebody give me some advice?

[kiliman]

This is a React Router question. Moving this discussion to that repository.

[mrsrhn]

This worked for us:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
          index: true,
          loader: async () => redirect('/team'),
       },
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

[brophdawg11]

Returning (or throwing) a redirect from a loader is the preferred way to redirect when using RouterProvider 👍

[tptodorov]

You might prefer the replace function, otherwise could be a strange behaviour going back.

{ index: true, loader: () => replace("/settings/general") },