我無法弄清楚在哪里放置登錄名，以便：
- 第一個默認端點是
profile - 第二個終點是
message - 端點上的全頁視圖
/login
<div className="App">
<Router>
<NavBar />
<Routes>
<Route path="/message" element={ <Message /> } />
<Route path="/" exact element={ <Profile /> } />
</Routes>
</Router>
</div>
.App{
max-width: 1000px;
height: 100vh;
margin: 0 auto;
display: grid;
grid-template-columns: .5fr 2fr;
}
是否有適當的方法來管理或放置組件？
設計：
- 在解決方案之一之后，某些組件會多次渲染:(
<div className="App">
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<NavBarLayout />}>
<Route path="/message" element={<Message />} />
<Route path="/" element={<Profile />} />
</Route>
</Routes>
</Router>
</div>
codesandbox.io 鏈接專案代碼
uj5u.com熱心網友回復：
好的，我明白了您的要求...您想為不包含該NavBar組件的登錄頁面呈現路由。為此，您使用所謂的Layout Routes。創建一個布局包裝器，其中包括要渲染到的嵌套路由NavBar的組件。Outlet
例子：
import { Outlet } from 'react-router-dom';
const NavbarLayout = () => (
<div className="Navbar">
<NavBar />
<Outlet />
</div>
);
...
.App {
max-width: 1000px;
height: 100vh;
margin: 0 auto;
}
.Navbar {
display: grid;
grid-template-columns: .5fr 2fr;
}
...
<div className="App">
<Router>
<Routes>
<Route path="/login" element={<Login />} />
{/* 2-column layout with navbar */}
<Route element={<NavbarLayout />}>
<Route path="/message" element={<Message />} />
<Route path="/" element={<Profile />} />
</Route>
</Routes>
</Router>
</div>
uj5u.com熱心網友回復：
你可以做條件渲染
if(!authenticated) {
return(
<LoginPage loginHandler={loginHandler} />
)
} else {
return(
<Router>
<Navbar />
....
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441417.html