javascript React Router 6嵌套路由

ljsrvy3e 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(121)

我有一个受保护的布线，它为使用该布局组件的其他组件 Package 了我的布局布线。
我有一个问题与受保护的路线不按预期工作。如果一个用户为空，当我尝试访问localhost：3000/create时，它应该呈现我的着陆页，但我得到的是一个空白屏幕。
我意识到，如果我只有一个包含一个元素 prop 的路由，它就能正常工作。我做错了什么？

我的路由

<Router>
  <Routes>
    <Route path='/' element={<LandingPage />} />
    <Route path='*' element={<NotFound />} />
    <Route element={<ProtectedRoutes />}>
      <Route element={<ResponsiveDrawer />}>
        <Route path='/dashboard' element={<Dashboard />} />
        <Route path='/create' element={<Create />} />
        <Route path='/edit/:id' element={<Edit />} />
      </Route>
    </Route>
  </Routes>
</Router>

我的保护路由

const ProtectedRoutes = () => {
 const { user } = useContext(UserContext);
 // console.log(user);

 return user !== null ? <Outlet /> : <LandingPage />;
};

JavaScript

来源：https://stackoverflow.com/questions/72364292/react-router-6-nest-routes

1条答案

按热度按时间

brjng4g31#

ProtectedRoutes正在渲染一个Outlet组件，以便将嵌套的Route组件渲染到其中。ResponsiveDrawer还需要为它 Package 的任何嵌套Route组件呈现Outlet。

<Router>
  <Routes>
    <Route path='/' element={<LandingPage />} />
    <Route path='*' element={<NotFound />} />
    <Route element={<ProtectedRoutes />}>    // <-- render Outlet
      <Route element={<ResponsiveDrawer />}> // <-- render Outlet
        <Route path='/dashboard' element={<Dashboard />} />
        <Route path='/create' element={<Create />} />
        <Route path='/edit/:id' element={<Edit />} />
      </Route>
    </Route>
  </Routes>
</Router>

呈现ResponsiveDrawer的路由呈现到ProtectedRoutes组件的Outlet中，嵌套路由呈现到ResponsiveDrawer组件的Outlet中。
示例ResponsiveDrawer：

const ResponsiveDrawer = () => {
  // business logic

  return (
    <>
      {/* UI */}
      {/* Drawer UI */}
      <Outlet /> // <-- nested routes render here
    </>
  );
};

赞(0）回复(0）举报 2023-05-27

我来回答

javascript React Router 6嵌套路由

我的路由

我的保护路由

1条答案

相关问题

热门标签

最新问答