react-router with createBrowserRouter

[steveoh]

I'm using react-router 7.1.1 and have routes with loader and lazy props.

const router = createBrowserRouter(
    createRoutesFromElements(
      <Route element={<Layout />}>
        <Route
          index
          loader={() => promotableRoute(anonymous)}
          lazy={() => import('./components/page/Landing')}
        />

The loader and lazy are only available when using the createBrowserRouter function. I'm trying to use a design system that is built using react-aria and it appears I need to use their RouterProvider to allow links and things to use client side routing.

    <RouterProvider navigate={navigate} useHref={useHref}>

The RouterProvider I am using accepts a router prop so I am unsure if I can simply replace the react-router implementation with react-aria in this format. The aria only accepts the navigate and useHref props.

 <RouterProvider router={router} />

Does anyone have any suggestions or experience in this area? Is it possible to achieve client side routing with the design system elements or will I need to duplicate them?

[steveoh]

I ended up not using this component and dropping back to the useNavigation hook everywhere I needed navigation. It's not ideal but it did mostly work.

[jgarplind]

Thanks for sharing! Just ran into a similar conondrum.

[steveoh]

Yeah it's not ideal but it is working mostly. I'm noticing some issues with push state and the browser back button.

[universse]

You need to do sth like this

function RootRoute () {
   const navigate = useNavigate()

  return (
    <RACRouterProvider navigate={navigate} useHref={useHref}>
      <Outlet />
    </RACRouterProvider>
  )
}

const router = createBrowserRouter([
  {
    id: 'root',
    Component: RootRoute
    children: [...]
  }
])

export default function App () {
  return <RouterProvider router={router} />
}