how to make path for / and home in react router v6?

Question

this is my routes now, which don't work:

const routes = [
  {
    path: "/",
    element: <Navbar />,
    children: [{ path: "/(home)?", element: <Home /> }],
  },
];

i remember working on path before for home like this:

<Route path="/(home)?" element={<Home />} />

i want to match / and /home and render Home component for both?

Answer 1

You can pass an array of children routes for / and /home.

const routes = [
  {
    path: '/',
    element: <Navbar />,
    children: [
      { path: '/', element: <Home /> },
      { path: 'home', element: <Home /> },
    ],
  },
]

Note that the Navbar component should render Outlet to render the child routes.

import { Outlet } from 'react-router-dom'

const Navbar = () => (
  <>
    <h1>Navbar</h1>
    <Outlet />
  </>
)