Header and footer duplicating in html tree

Question

I have created a simple routing using react-router-dom and create this structure

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

in the final result i had this

Also i ues this routing

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

export { router }

I am expecting that it wouldnt duplicate tags

Answer 1

The reason is that you used the Layout component twice. You need to use the Layout component once at the root level and place your routes inside the children array directly. I provide updated code for that.

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

export { router }