页眉和页脚在 html 树中重复

Question

我使用react-router-dom创建了一个简单的路由并创建了这个结构

import { FC } from "react"
import { Outlet } from "react-router-dom"

const Layout:FC = () => {
  return <>
    <header>Header</header>
    <main>
    <Outlet/>
    </main>
    <footer>Footer</footer>
  </> 
}

export default Layout

在最终结果中我有这个

我也使用这个路由

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

export { router }

我希望它不会重复标签

Answer 1

我认为问题是由于路由器配置中的嵌套

<Layout />

造成的。您在其内部渲染

<Layout />

，这会导致页眉和页脚重复。尝试删除内部

<Layout />

，这样你的路线看起来像这样：

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