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

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

我想添加一个登录页面。但它必须是全屏的。如果只有登录的用户可以看到导航栏和侧边栏。但是在路由器 v6 中,我们不能在 Routes 中嵌套 RouteReact.Fragment 以外的其他元素。如果我在 Navbar 组件标记之外添加路由,则会出现错误。 Error: [Navbar] is not a <Route> component. All component children of <Routes> must be a <Route or <React.Fragment>

如何将登录路由添加到此?

用户首先应该看到全屏登录页面,成功登录后可以看到NavBarSidebar

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

更新:另一个答案甚至在这里 https://stackoverflow.com/questions/69999324/how-do-i-render-components-with-different-layouts-elements-using-react-router-do

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

相似文章

r - Average duration 的时间花费 R

我正在尝试编写一个可以计算行为事件的averageduration的脚本。理想情况下,可以为我所有的行为类别进行计算,如果可能的话,还可以计算标准误差。我的数据如下29/10/20156:09:389...