Not compatible with react router v6.4

[iamyoki]

React router v6.4 introduced a new way of creating router (https://reactrouter.com/en/main/routers/create-browser-router), so that leads to no longer possible to place <QueryParamProvider />under <RouterProvider />

[pbeshai]

Based on the linked docs, it seems like you should be able to just wrap the Root component with QueryParamProvider – is this not the case? e.g.

const router = createBrowserRouter([
  {
    path: "/",
    element: <QueryParamProvider><Root /></QueryParamProvider>,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

[marhaupe]

Can confirm that this should work. We basically did the same thing @pbeshai suggested. Bear in mind that you might need to add an <Outlet/> to whatever the equivalent to <Root/> is in your project.