Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago
Blek

How to nest element between content and router (react-router-dom v6)

I am trying to build react web, where is element (Provider) nested between router, so the element can use useLocation hook from router, while is above every element controlled by router (in example <About />, <FAQ />)

Code example without Provider rendered:
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom"

import About from "./About"
import FAQ from "./FaQ"
import Provider from "./contexts/Provider"

const router = createBrowserRouter([
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/faq",
    element: <FAQ />
  }
])

export default function Dashboard() {
  return (
    <>
      <RouterProvider router={router}/>
    </>
  )
}
Was this page helpful?