React 路由器 dom 导航在 useRoutes 中不起作用

Question

export default function Router() {
  const [store, dispatch] = useStore();

  const handleAppRedirect = () => {
    if (store.token === null) {
      return <Navigate to="/login" />;
    } else if (isTokenExpired()) {
      (async () => {
        await dispatch({ type: "LOGOUT" });
      })();
      return <Navigate to="/login" />;
    } else {
      return <MainLayout />;
    }
  };

  return useRoutes([
    {
      path: "/",
      element: handleAppRedirect(),
      children: [
        // Redirect from "/" to "/cars/list"
        { path: "/", element: <Navigate to="/cars/list" replace /> },
        { path: "/cars/list", element: <Home /> },
      ]
    },
    {
      path: "/login",
      element: store.token === null ? <Auth type="login" /> : <Navigate to="/" replace />,
    },
    { path: "*", element: <NotFound /> },
    { path: "/oops", element: <WentWrong /> },
  ]);
}

当路径为“/”时，只显示我的MainLayout。如果我手动提供“/cars/list”，页面将使用 MainLayout 正确呈现。

MainLayout组件组织应用程序的主要内容（Outlet）

 <MainStyle>
     <PageLayout config = {pagesConfig}>
          <Outlet />
     </PageLayout>
</MainStyle>

当导航到“/”时，我希望它导航到“/cars/list”，但它只显示主要布局，内部没有任何出口。

Answer 1

天哪，他们有没有改变过 React Router。我有 5 个关于 v.4 的项目。不期待那些迁移。

无论如何，在我看来，你正在将

<Navigate to="/cars/list" replace />

映射到“//”（这甚至是一个有效的 URL 路径吗？）。您依赖于

handleAppRedirect

，因此将重定向组件作为

element

字段传递并不是真正的选择。您可以尝试使用空路径。我不知道它是否会起作用，React Router 可能会因为你传递了一条空路径而对你大喊大叫。或者，您最终可能需要在

<Home />

组件中处理重定向。