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