How to have a layer between Router and Routes

[sazzer]

I'm new to React Router v6, but not to React Router in general. What I'm trying to solve was relatively easy before, but I can't work out now how to do it :(

I'm wanting to have a component that wraps all of my routes, but must be inside the router - because it needs to use the useNavigation hook. In particular, this is to handle authentication callbacks - the idea is that, when you authenticate, this component handles the callback and redirects you to the page you were on before via useNavigate.

However, to minimise flickering, I don't want to render the routes until this has succeeded - it involves making an XHR call for an access token, so will take an amount of time.

It seems - maybe incorrectly? - to me that what I want is therefore:

• App
  • BrowserRouter
    • AuthenticationWrapper
      • Routes

However, I can't see any way of achieving this with createBrowserRouter. The best I've been able to manage is to put the AuthenticationWrapper inside my root Route, but this is then blurring the lines between my App and UI layers.

Is there a better way to achieve this? Or is this the only option right now?

Cheers

[brophdawg11]

However, to minimise flickering, I don't want to render the routes until this has succeeded - it involves making an XHR call for an access token, so will take an amount of time.

This is exactly what the new Data Router paradigms aim to help with by completely decoupling data fetching from rendering. So what you really want (when using RouterProvider) is to do your auth checks in your loader and redirect there which (1) can be async and (2) happens completely before any rendering happens.

Otherwise, yes the solution would be is to move the stuff that used to live between BrowserRouter + Routes into a root layout route. But moving your data fetch8ing to loaders/actions should provide a much better UX and also simplify your application code significantly since you no longer need to manage the async state/effects in your components.

[sazzer]

That mostly works. And, as you say, works better. However, I'm having problems with it under StrictMode - as I've just asked about here.

Cheers