[英]Page layout broken in React Router v6
I was refactoring my React app after updating React Router to v6 and I got rid of the error I was getting in my routes, except now the desired layout is broken.在将 React Router 更新到 v6 之后,我正在重构我的 React 应用程序,并且我摆脱了我在路由中遇到的错误,但现在所需的布局被破坏了。
I need to include a permanent toolbar and a sidebar to be visible only in some pages.我需要包含一个永久工具栏和一个侧边栏,以便仅在某些页面中可见。 I tried to follow the docs but now the layout component is placed above all the pages it should be wrapping, not just overlapping them, but actually concealing them behind it.我试图按照文档进行操作,但现在布局组件被放置在它应该包装的所有页面之上,不仅仅是重叠它们,而是实际上将它们隐藏在它后面。
The Layout component:布局组件:
function Layout({ children }) {
return (
<div className="layout">
<Header />
<SidePanel />
<div className="main" style={{ marginTop: "100px" }}>
{children}
</div>
</div>
);
}
export default Layout;
The AppRouter component: AppRouter 组件:
function AppRouter() {
return (
<Router>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
<Route element={<Layout />}>
<Route path="/diary" element={<Diary />} />
<Route path="/results" element={<Results />} />
<Route path="/details" element={<Details />} />
<Route path="/about" element={<About />} />
</Route>
</Routes>
</Router>
);
}
export default AppRouter;
Layout
should render an Outlet
for the children Routes
to be rendered into. Layout
应该为要渲染的子Routes
渲染一个Outlet
。
import { Outlet } from 'react-router-dom';
function Layout() {
return (
<div className="layout">
<Header />
<SidePanel />
<div className="main" style={{ marginTop: "100px" }}>
<Outlet />
</div>
</div>
);
}
An
<Outlet>
should be used in parent route elements to render their child route elements.<Outlet>
应该在父路由元素中使用以呈现其子路由元素。 This allows nested UI to show up when child routes are rendered.这允许在渲染子路由时显示嵌套 UI。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.