conditional rendering with createBrowserRouter

[kristersd]

I would like to create public and private routes in React application while using react-router-dom and createBrowserRouter.

An simple examples, what I would like to have but you can not define createBrowserRouter in the render lifecycle or have conditional routes. What is the solution here for both of those examples?

While I could use loader to have "conditional" rendering but how I would access the context data,
as useSessionUser() is tied to component lifecycle; Is the only solution to use a external store?

What about when I would like to have different index(element) routes in private and public routes?

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => void, [])

  if (isLoading) {
    return null
  }

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}

const App = () = > {
  return (
    <UserProvider>
      {void 0}
    </UserProvider>
  )
}

const PRIVATE_ROUTES = void 0;
const PUBLIC_ROUTES = void 0;

const Foo = () => {
  const { data, isLoading } = useSessionUser();
  if (isLoading) {
    return <Loading />
  }
  
  // ❌ router can not be defined inside render lifecycles
  const router = createBrowserRouter(data ? PRIVATE_ROUTES : PUBLIC_ROUTES)

  return <RouterProvider router={router} />
}

const useBarMutation = () => {
  return {
    mutate: async () => {
      const data = await login(void 0);
      if (data) {
        updateSessionCache(data);
        // ❌ we can not navigate to private route from here
        navigate("/dashboard") // this route would be defined in PRIVATE_ROUTES
        return
      }
      navigate("/");
    },
   }
}

Important to note:

• The createBrowserRouter must be outside the Component render lifecycle and be treated as singleton. Link to maintainer answer
• The routes must be created beforehand to be able to use Data API. Link to maintainer answer

[GabenGar]

Why do you need two separate routers for something which can implemented entirely in loaders?

[kristersd]

Could you please show an example, how I would be able to achieve the behaviour with loaders? Especially, taking in account what I have already wrote.

While I could use loader to have "conditional" rendering but how I would access the context data,
as useSessionUser() is tied to component lifecycle; Is the only solution to use a external store?

[GabenGar]

useSessionUser() pulls the session data from somewhere, it isn't magically aware of the data from the rest of your code. In fact it's exactly the responses you got from the links you've outlined.

[kristersd]

To achieve the behaviour of not invoking request on each route loader, you have to save the response somewhere. That's why I have added "is the only solution to use external store?".

In Tanstack Router, you have alternative with using router context to provide additional data to loaders.