如何在 React Router v6 路由中添加导航栏和侧边栏？

Question

我正在构建一个 React 应用程序并使用 React Router V6 进行路由。在应用程序中，我在顶部有一个导航栏，在应用程序的左侧有一个边栏。使用侧边栏，我在应用程序中呈现不同的页面（在 'screens-section-container' div 内，如下面的代码所示）。

我想添加一个登录页面。但它需要全屏。如果只有登录用户才能看到导航栏和侧边栏。但是对于 Router v6，我们不能在 Routes 中嵌套除 Route 或 React.Fragment 之外的其他元素。如果我在 Navbar 组件标签外添加路由，它会报错。 Error: [Navbar] is not a <Route> component. All component children of <Routes> must be a <Route or <React.Fragment>.

如何添加登录路径？

用户首先应该看到全屏登录页面，登录成功后可以看到NavBar和Sidebar。

App.tsx的代码是这样的，

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <div className="screens-container">
          <Sidebar />
          <div className='screens-section-container'>
            <Routes>
              <Route path='/' element={<Home />} />
              <Route path='/customers' element={<Customers />} />
              <Route path='/products' element={<Products/>}/>
              <Route path='/transactions' element={<Transactions />} />
              <Route path='/users' element={<Users />} />
            </Routes>
          </div>
        </div>
      </BrowserRouter>
    </div>
  );
}

更新：另一个答案甚至在这里

Answer 1

你有没有尝试过类似的东西：

return (
  <div className="App">
    <BrowserRouter>
    {logged ? (
      <>
      <Navbar />
      <div className="screens-container">
        <Sidebar />
        <div className='screens-section-container'>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/customers' element={<Customers />} />
            <Route path='/products' element={<Products/>}/>
            <Route path='/transactions' element={<Transactions />} />
            <Route path='/users' element={<Users />} />
          </Routes>
        </div>
      </div>
      </>
    ): (
      <Routes>
        <Route path='/' element={<Login />} />
      </Routes>
    )}
    </BrowserRouter>
  </div>
);

如何在 React Router v6 路由中添加导航栏和侧边栏？

How to add Navbar and a Sidebar inside the React Router v6 Routes?

reactjs

react-router

react-router-dom