React Router v6.8.1

[webjoyable]

How to wrap RouteProvider (data router) around my own ContextProvider, for example ModalContext.

<RouterProvider router={router}>
<ModalContext />
</RouterProvider>

I cannot wrap layout element in the routes since I have couple of different outlets (login page, protected pages)

[sergiodxa]

Why not switch the order?

<CustomContextProvideR>
  <RouterProvider router={router} />
</CustomContextProvider>

Also this should be in RR repository, not in Remix.

[webjoyable]

I need access to router context. Sorry, I have no idea how I posted here :)

[jamesmarrs]

Coming from v5 where you're able to do that, it can prove challenging to migrate to the newer version on an actual production application, especially if a specific provider above your RouterProvider needs a fundamental redirect..

I believe what you want to do is export your router from your 'routing' file.

export const router = createBrowserRouter(createRoutesFromElements(_ROUTES_HERE_))

next in your top level Provider..
you can import it and call the .navigate function on the router export.

import { router } from "_your_routing_file_";

// .. some component
// ..
.then((url) => {
  router.navigate(url)
})

It doesnt seem to bring any issues to the application using it in this way since only one BrowserRouter is allowed within the application.

I would probably avoid using syntax like ../., -1, and use urls like /users, /users/20, etc since your use case is probably completely asynchronous.

Hopefully this helps!