Router 找不到嵌套的 Route 组件 v6

Question

我正在使用 react-router v6，我有这么简单的 App 组件。

type RouteType = {
  path: string;
  element: any;
}

function App() {
  const [user] = useAuthState(auth);

  const USER_ROUTES: RouteType[] = user ? [
    { path: '/signin', element: <Login /> },
    { path: '/signup', element: <Signup /> },
  ] : [
    { path: '/games', element: <Games /> },
    { path: '/tournaments', element: <Tournaments /> },
    { path: '/mymatches', element: <MyMatches /> },
  ];

  const PUBLIC_ROUTES: RouteType[] = [
    { path: '*', element: <NotFound /> },
    { path: '/', element: <Home /> },
  ];

  return (
    <>
      <Header />
      <Routes>
        {[...USER_ROUTES, ...PUBLIC_ROUTES].map(
          ({ path, element }, i) => <Route key={i} path={path} element={element} />,
        )}
      </Routes>
    </>
  );
}

但独立于 user 值，它始终呈现 * 路由 (NotFound)。如何用这样的概念重写这段代码而不出错？

谢谢。

Answer 1

据我所知，您颠倒了用户路由的逻辑。当 user 为真时，您呈现 signin/signup 路由，而不是“经过身份验证”的用户应该能够访问的路由。

当user为假时"/games"，"/tournaments"，用户路由返回"/mymatches"。如果您尝试导航到 "/signin"，"*" 路径会捕获它并呈现 NotFound 组件，因为当前没有呈现 "/signin" 的路由。

当 user 为真时，交换为 USER_ROUTES 返回的路由。

function App() {
  const [user] = useAuthState(auth);

  const USER_ROUTES: RouteType[] = user ? [
    // truthy user, render user routes
    { path: '/games', element: <Games /> },
    { path: '/tournaments', element: <Tournaments /> },
    { path: '/mymatches', element: <MyMatches /> },
  ] : [
    // falsey user, render signin/signup routes to authenticate
    { path: '/signin', element: <Login /> },
    { path: '/signup', element: <Signup /> },
  ];

  const PUBLIC_ROUTES: RouteType[] = [
    { path: '*', element: <NotFound /> },
    { path: '/', element: <Home /> },
  ];

  return (
    <>
      <Header />
      <Routes>
        {[...USER_ROUTES, ...PUBLIC_ROUTES].map(({ path, element }) => (
          <Route key={path} path={path} element={element} />
        ))}
      </Routes>
    </>
  );
}

Router 找不到嵌套的 Route 组件 v6

Router can not find nested Route components v6

javascript

react-router

react-router-dom