小编Ste*_*eve的帖子

我目前正在尝试在我的应用程序中实现 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, …