React Router v6 私有路由 - 使用 Moralis api

Question

我不明白为什么这段代码不起作用。 “isAuthenticated”是来自moralis API 的布尔值。 如果为 true，则应呈现 outlet，如果为 false，则应呈现导航选项。

const ProtectedRoutes = () => {
  const { isAuthenticated } = useMoralis();
  return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
};

return (
  <Routes>
    <Route path={ROUTER_PATHS.SIGNUP} element={<Signup />} />
    <Route element={<ProtectedRoutes />}>
      <Route path={ROUTER_PATHS.EMPLOYER} element={<MarketPlaceEmployer />} />
      <Route path={ROUTER_PATHS.EMPLOYEE} element={<MarketPlaceEmployee />} />
    </Route>
  </Routes>
);

Answer 1

使用<Outlet />组件将使ProtectedRoutes组件成为 Layout 组件，以使ProtectedRoutes作为包装组件工作，您应该选择渲染子组件，将ProtectedRoutes组件更改为，

const ProtectedRoutes = ({ children }) => {
  const { isAuthenticated } = useMoralis();
  if (!isAuthenticated) {
    return <Navigate to="/" />;
  }
  return children ? children : <Outlet />;
};

另外，在path之前添加exact ，

 return (
<Routes>
  <Route path={ROUTER_PATHS.SIGNUP} element={<Signup />} />
  <Route element={<ProtectedRoutes />}>
    <Route exact path={ROUTER_PATHS.EMPLOYER} element={<MarketPlaceEmployer />} />
    <Route exact path={ROUTER_PATHS.EMPLOYEE} element={<MarketPlaceEmployee />} />
  </Route>
</Routes>