React Router 6 嵌套路由

Question

我有一個受保護的路由，它為使用布局組件的其他組件包裝了我的布局路由。

我遇到了受保護路線無法按預期工作的問題。 如果用戶為空，例如，當我嘗試訪問 localhost:3000/create 時，它​​應該呈現我的登錄頁面，但我得到一個空白屏幕。

我意識到如果我只有一條包含一個元素道具的路線，它可以正常工作。 我究竟做錯了什么？

我的路線

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

Answer 1

ProtectedRoutes正在渲染一個Outlet組件，用於渲染嵌套的Route組件。 ResponsiveDrawer還需要為其包裝的任何嵌套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
    </>
  );
};