NextUI 2.4.x and RouterProvider from react-router-dom

[ikoes]

Hello

I've noticed that the actual React Router support page describes how to integrate nextui using <BrowserRouter> and <Routes> which as I have understood (I'm a newbie) is deprecated in favor of React's "RouterProvider".

Is it possible ot integrate nextui navigation using React's RouterProvider ?

Eg:

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: "/", element: <Homepage /> },
      { path: "/test", element: <TestPage />},
    ]
  },
]);

function App() {

  return <RouterProvider router={router} />

}

Thanks

F.

[pavitra-infocusp]

I'm also finding it difficult to do this

const router = createBrowserRouter([
  {
    element: <Root />,
    children: [
      {
        path: "/",
        element: <BridgeRoute />,
      },
      {
        path: "/transactions",
        element: <Transactions />,
      },
    ],
  },
]);

function App() {
  const navigate = useNavigate(); // Uncaught Error: useNavigate() may be used only in the context of a <Router> component.
  
  return (
    <React.StrictMode>
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <NextUIProvider navigate={navigate}>
            <RouterProvider router={router} />
          </NextUIProvider>
        </QueryClientProvider>
      </WagmiProvider>
    </React.StrictMode>
  );
}

[pavitra-infocusp]

Fixed it by accessing router.navigate from createBrowserRouter

const router = createBrowserRouter([
  {
    element: <Root />,
    children: [
      {
        path: "/",
        element: <BridgeRoute />,
      },
      {
        path: "/transactions",
        element: <Transactions />,
      },
    ],
  },
]);

function App() {  
  return (
    <React.StrictMode>
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <NextUIProvider navigate={router.navigate}>
            <RouterProvider router={router} />
          </NextUIProvider>
        </QueryClientProvider>
      </WagmiProvider>
    </React.StrictMode>
  );
}

[vitch]

Thanks for the hint.

In my case ("react-router-dom": "^7.0.2" and "@heroui/react": "^2.6.13") I had to do:

navigate={(to, opts) => {
  void router.navigate(to, opts);
}}

When I just passed router.navigate it still did full page refreshes...

[wingkwong]

@vitch full page refresh should be fixed in next release