v6 dynamic routes

[r3wt]

basically:

if user not logged in
-> Router with Login/Signup/Etc public routes
else
-> Router -> Root Element -> Nested Application Routes

possible in v6? couldn't find anything in the docs, i'm coming from v4

[jukkahuuskonen]

We have an app (with v5 router) that serves different companies with users with different levels of access. We need to be able to change the routing based on user level (companyEmployee, companyGroupAdmin, CompanyAdmin, admin, root) and Company itself.

How do I manage that with createBrowserRouter?

Also we need to block navigation in some situation and unstable_usePrompt doesn't seem to work. this may be due to dynamically creating routes with Routes/Route-components.

[brophdawg11]

In v6, BrowserRouter should work similar to prior versions and you can dynamically include different <Routes> based on whether the user is logged in or not.

If you are using RouterProvider and the Data APIs, then data-aware routes must be defined up front, so you instead want to check for user authentication in your loader and redirect if not logged in.

It's on the list to get some RouterProvider examples added to the examples/ directory for this pattern!

[User6531]

But if the information about users' permissions is stored in the Redux store, how can I retrieve that data if I'm unable to use 'useSelector' inside loader?

[User6531]

Is it a correct implementation with rtk-query?

loader: () => {
      const p = store.dispatch(postsApi.endpoints.getPosts.initiate());

      try {
        const response = await p.unwrap()
        return response
      } catch (e) {
        // see https://reactrouter.com/en/main/fetch/redirect
        return redirect("/login")
      } finally {
        p.unsubscribe()
      }
    },

[jukkahuuskonen]

In our case declaring them in advance is quite hard, since we may have dozens of different routings depending on the user/company.

Should the unstable_usePrompt work with the BrowserRouter? I would be glad to use it, since it basically works the same as old version.

Because that is a required feature for our app? Or are you planning to bring back the <Prompt />-component anytime soon?

ps. should I make this an other thread here?

[brophdawg11]

Should the unstable_usePrompt work with the BrowserRouter?

Unfortunately, no, this is a new feature available in RouterProvider

The goal is that you can wrap your entire <Routes> tree in a RouterPoivider and then migrate route-by route: https://reactrouter.com/en/main/upgrading/v6-data. I think that may unlock the usage of unstable_usePrompt for you even in child <Routes> but I'm not 100% confident.

[brophdawg11]

But if the information about users' permissions is stored in the Redux store, how can I retrieve that data if I'm unable to use 'useSelector' inside loader?

You should access the store directly. Your example looks about right, but I've not used rtk-query so I can't be sure. Your loader can do anything internally - it just needs to resolve with the data you need to access via useLoaderData