[英]Component inside component in React Router
I'm trying to make use of Mantine's App shell ( https://mantine.dev/core/app-shell/ ) in React Router to have it enabled on only specific routes.我正在尝试在 React Router 中使用 Mantine 的应用程序 shell ( https://mantine.dev/core/app-shell/ ) 使其仅在特定路由上启用。
How is it possible to implement this.这怎么可能实现。
Usually, to display a component I would to the following, for example:通常,要显示一个组件,我会执行以下操作,例如:
<Route element={<SidebarLayout {...{ inactive, setInactive }} />}>
<Route path="/" element={<Main />} />
But in this case, I got way more code (based on the example in the docs) - I'm planning to add a component inside this <AppShell>
Component (please look all the way down):但在这种情况下,我得到了更多代码(基于文档中的示例) - 我计划在这个
<AppShell>
组件中添加一个组件(请一直向下看):
<AppShell
styles={{
main: {
background:
theme.colorScheme === "dark"
? theme.colors.dark[8]
: theme.colors.gray[0],
},
}}
navbarOffsetBreakpoint="sm"
asideOffsetBreakpoint="sm"
navbar={
<Navbar
p="md"
hiddenBreakpoint="sm"
hidden={!opened}
width={{ sm: 200, lg: 300 }}
>
<Text>Application navbar</Text>
</Navbar>
}
aside={
<MediaQuery smallerThan="sm" styles={{ display: "none" }}>
<Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
<Text>Application sidebar</Text>
</Aside>
</MediaQuery>
}
footer={
<Footer height={60} p="md">
Application footer
</Footer>
}
header={
<Header height={70} p="md">
<div
style={{ display: "flex", alignItems: "center", height: "100%" }}
>
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
<Burger
opened={opened}
onClick={() => setOpened((o) => !o)}
size="sm"
color={theme.colors.gray[6]}
mr="xl"
/>
</MediaQuery>
<Text>Application header</Text>
</div>
</Header>
}
>
<Text>Resize app to see responsive navbar in action</Text> <-- PLANNING TO ADD COMPONENT HERE BASED ON ROUTE
</AppShell>
How can I integrate this whole thing in React Router?我怎样才能将整个事情集成到 React Router 中?
As the "SidebarLayout" name implies, you are asking how to implement what is called a layout route .正如“SidebarLayout”的名字所暗示的,你问的是如何实现所谓的布局路由。 Layout routes generally render some common logic and UI elements/components, and an Outlet component for nested routes to render their content into.
布局路由通常会渲染一些常见的逻辑和 UI 元素/组件,以及用于嵌套路由的Outlet组件以将其内容渲染到其中。 You generally render the
Outlet
component where you'd normally render the children
prop.您通常会在通常渲染
children
道具的地方渲染Outlet
组件。
Example:例子:
Render an Outlet
below the Text
component.在
Text
组件下方渲染一个Outlet
。
<AppShell
...
>
<Text>Resize app to see responsive navbar in action</Text>
<Outlet /> // <-- render Outlet here for nested routes
</AppShell>
Usage:用法:
<Routes>
<Route element={<SidebarLayout {...{ inactive, setInactive }} />}>
<Route path="/" element={<Main />} />
... other routes with SidebarLayout ...
</Route>
... other routes w/o SidebarLayout ...
</Routes>
This can be done in 2 ways:这可以通过两种方式完成:
By loading the AppShell
component inside a wrapper
function, you can wrap your sub-components by passing them based on the route
path.通过在
wrapper
function 中加载AppShell
组件,您可以通过基于route
路径传递子组件来包装子组件。
wrapper
component, let's call it withAppShell
component, now you can load it as follows:wrapper
组件,我们将其withAppShell
组件,现在您可以按如下方式加载它:export const withAppShell = (ChildComponent) =>
(
<AppShell ... // App Shell code start
<ChildComponent /> // the part where you wish to load your child component
</AppShell> // App Shell code end
)
withAppShell(ChildComponent);
Feels similar to the first one, but is not-感觉和第一个差不多,但不是——
export const AppShellWrapper = ({children}) =>
(
<AppShell ... //start
{children}
</AppShell> //end
)
<AppShellWrapper>
<ChildComponent />
</AppShellWrapper>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.