KPC
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}/>
    </>
  )
}
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}/>
    </>
  )
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?