条件索引路由

Question

我正在寻找一种解决方案来根据某些条件更改React Router的索引路由：

如果用户对象的特定属性（例如“externalAPIConnected”）为 true，则索引路由应为“search”，如果为 false，则索引路由应为“settings”（采取某些操作，以便属性更改为 true）。

目前，我使用以下解决方法：

应用程序.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 && credetials.user.externalAPIConnected) {
      return <Navigate to="/search" />
  } else {
      return (
        // page content
      );
  }

但是，我想知道是否有更“优雅”的解决方案，不会重定向两次？

Answer 1

如果您基本上只是希望“/”路由有条件地重定向到“/settings”或“/search”作为“默认路由”，基于

credentials.user.externalAPIConnected

钩子中的

useCredentials

值，那么我会建议一个简单的根组件就可以做到这一点。

不要无条件从

"/"

重定向到

"/settings"

，然后有条件重定向到

"/search"

，而是创建一个有条件从

'/"

重定向到任一目标默认路由的组件。

示例：

const DashboardIndex = () => {
  const { user } = useCredentials();

  return (
    <Navigate
      to={user.externalAPIConnected ? "/search" : "/settings"}
      replace
    />
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboard />,
    errorElement: <ErrorPage />,
    loader: credentialsLoader,
    children: [
      { index: true, element: <DashboardIndex /> },
      { path: "search", element: <SearchPage /> },
      { path: "settings", element: <SettingsPage /> },
      ...
    ],
  },
  ...
]);