React Router 中的组件内部组件

Question

我正在尝试在 React Router 中使用 Mantine 的应用程序 shell ( https://mantine.dev/core/app-shell/ ) 使其仅在特定路由上启用。

这怎么可能实现。

通常，要显示一个组件，我会执行以下操作，例如：

<Route element={<SidebarLayout {...{ inactive, setInactive }} />}>
                <Route path="/" element={<Main />} />

但在这种情况下，我得到了更多代码（基于文档中的示例） - 我计划在这个<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>

我怎样才能将整个事情集成到 React Router 中？

Answer 1

正如“SidebarLayout”的名字所暗示的，你问的是如何实现所谓的布局路由。 布局路由通常会渲染一些常见的逻辑和 UI 元素/组件，以及用于嵌套路由的Outlet组件以将其内容渲染到其中。 您通常会在通常渲染children道具的地方渲染Outlet组件。

例子：

在Text组件下方渲染一个Outlet 。

<AppShell
  ...
>
  <Text>Resize app to see responsive navbar in action</Text>
  <Outlet /> // <-- render Outlet here for nested routes
</AppShell>

用法：

<Routes>
  <Route element={<SidebarLayout {...{ inactive, setInactive }} />}>
    <Route path="/" element={<Main />} />
    ... other routes with SidebarLayout ...
  </Route>

  ... other routes w/o SidebarLayout ...
</Routes>

Answer 2

这可以通过两种方式完成：

在包装器 function 中加载 AppShell：

通过在wrapper function 中加载AppShell组件，您可以通过基于route路径传递子组件来包装子组件。

1. 您需要创建一个单独的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
    )

2. 要使用它，首先导入，然后：

withAppShell(ChildComponent);

在包装器组件中加载 AppShell：

感觉和第一个差不多，但不是——

1. 创建组件：

export const AppShellWrapper = ({children}) => 
    (
        <AppShell ... //start
        {children}
        </AppShell> //end
    )

2. 使用它，首先导入，然后：

<AppShellWrapper>
   <ChildComponent />
</AppShellWrapper>