如何实现React Router条件化索引路由？求无二次重定向方案

问题场景 #

需要实现索引路由根据用户属性动态跳转：当用户对象的externalAPIConnected为true时，根路径/自动跳转到/search；为false时跳转到/settings（用户可在该页面完成配置使属性变为true）。

当前临时方案会触发两次重定向，希望得到更简洁的实现方式。

原方案代码 #

App.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboard />,
    errorElement: <ErrorPage />,
    loader: credentialsLoader,
    children: [
      {
        index: true,
        element: <Navigate to="/settings" state={true} />
      },
      // 其他子路由...
    }
  }
]);

SettingsPage.jsx

export default function SettingsPage() {
  const credentials = useCredentials();
  const location = useLocation();
  const isRedirect = location.state;
  
  if (isRedirect && credentials.user.externalAPIConnected) {
      return <Navigate to="/search" />
  } else {
      return (
        // 页面内容
      );
  }
}

优化方案 #

方案一：通过路由Loader直接处理重定向 #

利用根路由已有的credentialsLoader获取用户信息，在索引路由的loader中直接判断并返回重定向响应，仅需一次跳转：

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

const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboard />,
    errorElement: <ErrorPage />,
    loader: credentialsLoader,
    children: [
      {
        index: true,
        loader: async ({ request }) => {
          // 复用根路由loader的数据，避免重复请求
          const credentials = await credentialsLoader({ request });
          return credentials.user.externalAPIConnected 
            ? redirect("/search") 
            : redirect("/settings");
        },
      },
      { path: "search", element: <SearchPage /> },
      { path: "settings", element: <SettingsPage /> },
      // 其他子路由...
    ],
  },
]);

此方案无需修改SettingsPage，路由层面直接完成一次跳转，消除了二次重定向问题。

方案二：在索引路由Element中条件渲染跳转 #

如果不想使用loader，可直接在索引路由的element组件中判断用户状态，一次完成跳转：

import { Navigate, useLoaderData } from "react-router-dom";

const IndexRedirect = () => {
  const credentials = useLoaderData(); // 自动获取根路由loader返回的数据
  return credentials.user.externalAPIConnected ? (
    <Navigate to="/search" replace />
  ) : (
    <Navigate to="/settings" replace />
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboard />,
    errorElement: <ErrorPage />,
    loader: credentialsLoader,
    children: [
      {
        index: true,
        element: <IndexRedirect />,
      },
      // 其他子路由...
    ],
  },
]);

添加replace属性可避免浏览器历史记录中留存重定向的临时条目，提升用户体验。

内容的提问来源于stack exchange，提问作者fl4t1