我正在使用react-router-domv6。我希望Login在沒有Sidebar和Topbar組件的情況下呈現我的頁面。怎么做？
function App() {
return (
<Router>
<Container>
<Sidebar />
<Content>
<Topbar />
<MainContent>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users" element={<UserList />} />
<Route path="/users/:id" element={<User />} />
<Route path="/newUser" element={<NewUser />} />
<Route path="/products" element={<ProductList />} />
<Route path="/products/:id" element={<Product />} />
<Route path="/newProduct" element={<NewProduct />} />
<Route path="/login" element={<Login />} />
</Routes>
</MainContent>
</Content>
</Container>
</Router>
);
}
我不希望我的登錄頁面里面的渲染MainContent，但走的是整個頁面而不Sidebar和Topbar。
我嘗試移動Routes上部并將登錄名route放在側邊欄上方，但出現錯誤Error: [Sidebar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
uj5u.com熱心網友回復：
由于SideBar并且TopBar似乎是“布局”的一部分，并且您想要一個專門用于“/login”的不同“布局”，那么我建議將容器組件抽象為布局組件。每個布局容器都應該Outlet為它們各自的嵌套路由渲染一個。
const AppLayout = () => (
<Container>
<Sidebar />
<Content>
<Topbar />
<MainContent>
<Outlet />
</MainContent>
</Content>
</Container>
);
const LoginLayout = () => (
<Container>
<Content>
<MainContent>
<Outlet />
</MainContent>
</Content>
</Container>
);
...
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<AppLayout />}>
<Route index element={<Home />} />
<Route path="users" element={<UserList />} />
<Route path="users/:id" element={<User />} />
<Route path="newUser" element={<NewUser />} />
<Route path="products" element={<ProductList />} />
<Route path="products/:id" element={<Product />} />
<Route path="newProduct" element={<NewProduct />} />
</Route>
<Route path="/login" element={<LoginLayout />}>
<Route index element={<Login />} />
</Route>
</Routes>
</Router>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/364572.html
標籤：javascript 反应 路线 反应路由器 反应路由器-dom