[英]react router v6 and nest UI and URL
I am trying to figure out what this bit of code means:我试图弄清楚这段代码的含义:
<Routes>
<Route path="/" element={<Dashboard />}>
<Route
path="messages"
element={<DashboardMessages />}
/>
<Route path="tasks" element={<DashboardTasks />} />
</Route>
<Route path="about" element={<AboutPage />} />
</Routes>
https://reactrouter.com/docs/en/v6/components/route https://reactrouter.com/docs/en/v6/components/route
If the location is /
, then the rendered UI will be如果位置是/
,那么渲染的 UI 将是
<Dashboard />
While if the location is /messages
, then the rendered UI will be而如果位置是/messages
,那么渲染的 UI 将是
<Dashboard >
<DashboardMessages />
<Dashboard />
Same logic for /tasks
and /about
. /tasks
和/about
的逻辑相同。
Is my understanding correct?我的理解正确吗?
Your understanding is partly correct.你的理解是部分正确的。 Given the following routing code:给定以下路由代码:
<Routes>
<Route path="/" element={<Dashboard />}>
<Route path="messages" element={<DashboardMessages />} />
<Route path="tasks" element={<DashboardTasks />} />
</Route>
<Route path="about" element={<AboutPage />} />
</Routes>
It is correct that when the URL path is "/"
that only the Dashboard
component is rendered.正确的是,当 URL 路径为"/"
时,仅呈现Dashboard
组件。 This is what is called a Layout Route .这就是所谓的布局路线。 Layout routes generally provide some common component lifecycle and/or common UI layout, ie headers and footers, navbars, sidebars, etc.布局路由通常提供一些通用组件生命周期和/或通用 UI 布局,即页眉和页脚、导航栏、侧边栏等。
When the URL path is "/messages"
or "/tasks"
the Dashboard
component is rendered as well as the specifically matched routed content DashboardMessages
or DashboardTasks
into an Outlet
component rendered by Dashboard
.当 URL 路径为"/messages"
或"/tasks"
时, Dashboard
组件以及专门匹配的路由内容DashboardMessages
或DashboardTasks
被呈现到由Dashboard
呈现的Outlet
组件中。
Note that the "/about"
route is outside the "/"
dashboard layout route.请注意, "/about"
路线位于"/"
仪表板布局路线之外。 When the path is "/about"
then only AboutPage
is rendered.当路径为"/about"
时,仅呈现AboutPage
。
Here's an example layout route components:这是一个示例布局路由组件:
import { Outlet } from 'react-router-dom';
const AppLayout = () => {
... common logic ...
return (
<>
<Header />
<Outlet /> // <-- nested routes render element here
<Footer />
</>
);
};
const NavbarLayout = () => (
<>
<Navbar />
<Outlet /> // <-- nested routes render element here
</>
);
... ...
<Routes>
<Route element={<AppLayout />}>
... routes w/ header/footer & w/o navbar
<Route element={<NavbarLayout />}>
... routes also w/ navbar
</Route>
...
</Route>
... routes w/o header/footer
</Routes>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.