react-router-dom路由中Header与Footer重复显示问题求助

问题出在你的路由配置里重复嵌套了Layout组件：最外层路由已经使用<Layout/>作为父容器，它的子路由又再次声明了<Layout/>作为元素，导致内层Layout的Header、Footer和外层的叠加显示。

只需要修改路由配置，移除内层的<Layout/>，让子路由直接挂载页面组件即可：

const router = createBrowserRouter([
    {
        element: <Layout/>,
        children: [
            {
                path: '/',
                element: <Home/>
            },
            {
                path: '/about',
                element: <About/>
            },
        ]
    }
])

export { router }

修改后，外层Layout的<Outlet/>会直接渲染Home或About组件，Header和Footer只会显示一次，符合预期。

内容的提问来源于stack exchange，提问作者Павел Хорольський