這個問題在這里已經有了答案： 如何使用 react-router-dom v6 渲染具有不同布局/元素的組件 2 個答案 5 小時前關閉。
我正在構建一個 React 應用程式并使用 React Router V6 進行路由。在應用程式中，我在頂部有一個導航欄，在應用程式左側有一個側邊欄。使用側邊欄，我在應用程式中呈現不同的頁面（在'screens-section-container' div 中，如下面的代碼所示）。
我想添加一個登錄頁面。但它必須是全屏的。如果只有登錄的用戶可以看到導航欄和側邊欄。但是對于 Router v6，我們Route不能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 渲染具有不同布局/元素的組件
uj5u.com熱心網友回復：
您是否嘗試過類似的方法：
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>
</>
): (
<Route path='/' element={<Login />} />
)}
</BrowserRouter>
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/476715.html
上一篇：用逗號分隔的雙向系結字串