我目前正试图在我的应用程序中实现Reaction Router，我想在所有页面上使用最新版本(6.4)的布局，所以我使用createBrowserRouter和我的Layout元素以及所有的子元素来创建不同的路由，但实际上我的代码看不到它们中的任何一个.

我想得到每个页面的布局，有条件的渲染依赖于导航，所以我必须把它放在路由里面.

我试着按照DOC(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>
    )
}

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

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