Reactjs 条件索引路由

const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboard />,
    errorElement: <ErrorPage />,
    loader: credentialsLoader,
    children: [
      {
        index: true,
        element: <Navigate to="/settings" state={true} />
      },
    ...
  }

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
      );
  }

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 /> },
      ...
    ],
  },
  ...
]);

Reactjs相关问答推荐

导致类型错误的调度不是函数"；

无法在jest中发布行动

使用useReducer时，props 未从父级传递给子或孙级

Redux Store未触发React组件中的重新呈现

如何使数据库数据在第一次呈现时显示？

有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件？

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理？

React Router 6 点击链接在 React 18 应用中打开 flickr 页面

React设置上下文并进行导航

在遵循 react-navigation 的官方文档时收到警告消息

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色 ？

AWS 全栈应用程序部署教程构建失败

如何向 surveyjs 调查添加多个结尾？

ReactJS：useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

如何从一组对象映射 MUI 5 图标并更改其 colored颜色 ？

使用 React 中的功能组件更改另一个组件的状态

组件焦点上的 MUI 更改栏 colored颜色

npm init vite@latest 和 npm init vite 有什么区别？

运行开发服务器时如何为 Vite 指定运行时目录

在 React 中访问作为 prop 传递的状态变量