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

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

我想添加一个登录页面。但它需要全屏。如果只有登录用户才能看到导航栏和侧栏。但是对于 Router v6，我们不能嵌套除Route or React.Fragment内Routes。如果我在外部添加路由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>
  );
}

更新：另一个答案甚至在这里如何使用react-router-dom v6渲染具有不同布局/元素的组件 https://stackoverflow.com/questions/69999324/how-do-i-render-components-with-different-layouts-elements-using-react-router-do

你有没有尝试过类似的事情：

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>
);