Is there a way to add routes asynchronously in v6?

[OneMoreJack]

In my App, some routes can only accessed by those having permission. So, I want to make an HTTP request first to figure out which routes can be accessed by the current user, and then rigister these routes asynchronously. I know there's an auth example in the official doucumentation, but in that example, all routes are registered, that is not really what I want.

[AlanGreene]

Hey @OneMoreJack, did you find a solution to asynchronously adding routes? I'm facing a similar problem, not auth related, but making an API call to get a list of dynamically defined routes to be added.

[VillePakarinenPosti]

Is this RFC similar to what you are looking for? #11113

[AlanGreene]

Yes it looks like this would address at least some of my needs. I'll have to read through it again in more detail but at first glance it looks promising. Thanks @VillePakarinenPosti

[OneMoreJack]

In my case, I achieved what I want by useRoutes. Here' s what I did step by step:

Step 1
Create a new context to provide the whole app with your auth data

// AuthContext.tsx
const AuthContext = React.createContext<AuthContextValue>({
  auth: getInitialAuth(),
  updateAuth: () => {}
});

export const useAuth = () => {
  const { auth, updateAuth } = useContext(AuthContext);
  return { auth, updateAuth };
};

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const { auth, loading, updateAuth } = useFetchAuth(); // your custom hook

  const contextValue = useMemo<AuthContextValue>(() => ({ auth, updateAuth }), [auth, updateAuth]);

  return (
    <AuthContext.Provider value={contextValue}>
      {loading ? <PageLoading /> : children}
    </AuthContext.Provider>
  );
};

Step 2
Define a DynamicRoutes component

const DynamicRoutes = () => {
  const { auth } = useAuth();
  const routes = filterYourRoutes(auth);
  return useRoutes(routes);
};

Step 3
In your App.tsx

export function APP() {
  return (
    <BrowserRouter>
      <AuthProvider>
          <DynamicRoutes />
      </AuthProvider>
   </BrowserRouter>
  )
}