Kevin Powell - Community•12mo ago

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

Gaming

Programming

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