reactjs - React Router 6.4 "CreateBrowserRouter"子元素不显示

Question

我目前正在尝试在我的应用程序中实现 React Router，我想在所有页面上使用最新版本 (6.4) 和 Layout，因此我将 createBrowserRouter 与我的 Layout 元素和所有子元素一起使用来制作不同的路线，但是实际上我的代码中看不到它们中的任何一个。

我想获取每个页面的布局，根据导航进行条件渲染，所以我必须将它放在路由器中。

我试着按照文档 ( https://reactrouter.com/en/main/routers/create-browser-router ) ，嵌套带有子项的路由:

路由器组件:

const router = createBrowserRouter([
    {
        element: <Layout />,
        children: [
            {
                path: '/',
                element: <Dashboard />,
            },
            {
                path: 'gestion_preferences',
                element: <ManagePreferences />,
            },
            {
                path: 'trame_preferences',
                element: <ManageTrames />,
            },
        ],
    },
])

布局组件:

const Layout = () => {

  return (
        <Container
            sx={{ height: '100%' }}
            maxWidth={false}
            disableGutters={true}
        >
            <Header  />
            <Box
                sx={{
                 height: "100%",
                  overflowY: "auto",
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  bgcolor: 'background.main',
                  zIndex:1,
                }}
            >
                <Outlet />
            </Box>
            <Footer />
        </Container>
  )
}

应用组件:

const router = createBrowserRouter(routesConfig)

const App = () => {
    return (
        <ThemeProvider theme={theme}>
                <CssBaseline />
                <UserProvider>
                    <Layout>
                        <RouterProvider router={router} />
                    </Layout>
                </UserProvider>
        </ThemeProvider>
    )
}

我不想手动重复我所有组件中的元素

编辑:我添加了其他组件一起工作，我也尝试在我的布局中放置 {children} 而不是 Outlet

Answer 1

问题

根据我对您的代码示例的了解，问题是 Layout 组件在两个地方呈现。一旦正确作为布局路由，嵌套路由可以将它们的 element 渲染到 Layout 渲染的 Outlet 中，然后再次在 App 中渲染 组件包装了 RouterProvider 组件。问题是 Layout 不会使用和呈现任何 children Prop ，因此不会呈现包装的 RouterProvider。

布局

const Layout = () => { // <-- no children prop
  return (
    <Container
      sx={{ height: '100%' }}
      maxWidth={false}
      disableGutters={true}
    >
      <Header />
      <Box ....>
        <Outlet />
      </Box>
      <Footer />
    </Container>
  )
}

应用

const router = createBrowserRouter(routesConfig);

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <UserProvider>
        <Layout>
          <RouterProvider router={router} /> // <-- child of Layout
        </Layout>
      </UserProvider>
    </ThemeProvider>
  );
};

解决方案

BrowswerRouter 数据路由器已经在渲染 Layout 组件，因此在 App 组件中完全没有必要，应该将其删除。

应用

const router = createBrowserRouter(routesConfig);

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <UserProvider>
        <RouterProvider router={router} />
      </UserProvider>
    </ThemeProvider>
  );
};