Blek Posts - Answer Overflow

Blek

•Created by Blek on 8/9/2023 in #front-end

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}/>
    </>
  )
}

1 replies

Gaming

Programming