React Router 6.4“CreateBrowserRouter”子元素不显示

Question

我目前正在尝试在我的应用程序中实现 React Router，我想在所有页面上使用最新版本（6.4）和布局，所以我将 createBrowserRouter 与我的布局元素和所有子元素一起使用来制作不同的路线，但实际上我可以用我的代码看不到其中任何一个。

我想获得每个页面上的布局，并根据导航进行条件渲染，因此我必须将其放在路由器内。

我尝试遵循文档（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到由Outlet渲染的Layout，并再次在App包装RouterProvider组件的组件中。问题是它Layout不消耗和渲染任何道具，因此不会渲染children包装的道具。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>
  );
};