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

发布于05月18日

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

我想添加登录页.但它需要全屏.如果只有已登录的用户才能看到导航栏和侧栏.但对于路由v6，我们无法在Routes中嵌套除Route或React.Fragment之外的其他元素.如果我在Navbar组件标记之外添加了路由，则会出现错误.

如何将登录路径添加到此中？

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

应用程序代码.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>
  );
}

更新:另一个答案是How do I render components with different layouts/elements using react-router-dom v6

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

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

推荐答案

Reactjs相关问答推荐

在Redux工具包查询中，是否可以将标记应用到API切片内的所有端点？

使用下一步中的路由/导航不会立即加载路由

React Context未正确更新

在Reaction中管理多个状态

如何在MUI x图表条形图上放置圆角？

React useContext 的未定义返回值

拖放 - 将排序保存到数组字段

Redux 工具包不更新状态

无法使用 MongoDB Atlas 和 Next.js 删除正确的帖子

如何在我的自定义主题中样式化MUI TreeItem组件

使用状态与复选框不同步

我可以更改 styled() 中的响应吗？ (MUI v5)

单元测试 useLoaderData() react-router v6 加载器函数

Wordpress 插件在激活时创建一个 React Public 页面

响应式媒体 React Tailwind

如何在react 日历中自定义带有圆形边框的日期项？

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

在react 钩子中将数组添加到数组状态给出一个数字

如何通过 Material Ui 设计将 Accordion 添加到您的 React 项目中？

RTK 查询 POST 方法不会改变数据