I'm planning migrate React Router to Data mode from existed project, but stumbled upon conditioned routes issue

[XCanG]

I have a project that was built many years ago and I plan to update it, I saw the new router approach and tried to implement on it but immediately stumbled upon conditioned routes issue.

In my case routes defined based on context provider:

export const useMyRoutes = () => {
  const auth = useContext(GlobalContext)
  return (
    <>
      <Route ... />
      {auth.isAuthenticated ? (
        <>
          <Route ... />
          {auth.user.isAdmin && (...)}
        </>
      ) : (
        <>
          <Route ... />
        </>
      )}
    </>
  )
}

It was written in a way like this, I tried new createBrowserRouter but I couldn't find a way to replicate this logic, specifically because I also can't get context within this variable and then I don't find a proper way to replicate this.

I searched for other Discussions and find old from 2023, #10478 but it doesn't answer my question.

Forget to specify, but I'm thinking about Data mode for now, because Framework mode require dev packages and I need a stable solution.

[sergiodxa]

The answer of the discussion you mentioned so answer your question, for both data and framework mode what you need to do is to use loaders to conditionally allow or not the user to access a route.

[XCanG]

It doesn't answer my question, I don't just want to add a condition, but use context and I can't do that outside of the react elements
I can't write something like

const auth = useContext(GlobalContext)
export const router = createBrowserRouter(...)

If it was a regular variable I could use it.

[XCanG]

And also there is still the other type condition, for example for / path I have a landing page when user is not authenticated but when is he loaded dashboard component, but I don't see the way to define both using this method.

[sergiodxa]

You can't use context in data or framework mode to define what routes exists, the routes needs to be defined before that so the router can optimize how data is loaded on navigation.

So the way to do it is by storing auth state outside React (not using a React state) in a way you can do getUser() in loader and actions, where to store this depends on you, it can be as simple as using localStorage, if you use some external store like Zustand or Redux that also works as you can always do store.getState() in the loaders, or you could use a cookie and then fetch the user from the API every time you need it.

Then you can perform authentication and authorization in the loaders/actions to allow the user to access or not the route, if the user is not allowed to access it you can redirect it somewhere else, or throw an error and allow the route error boundary to catch it and render something else instead (like render a 404 or 401 page).

---

For your second question, you will have to choose one of these:

1. Make / be only the landing, add a loader and if it's authenticated redirect to /dashboard
2. Return from the loader if the user is authenticated, if it's not render if it's render , you can use React.lazy to lazy load the landing or dashboard components

The first one is simple:

export default createBrowserRouter([
  {
    path: "/",
    loader() {
      if (isAuthenticated()) return redirect("/dashboard")
      return null
    },
    Component: Landing
  },
  {
    path: "/dashboard",
    loader() {
      if (isAuthenticated()) return null
      return redirect("/") // maybe /login?
    },
    Component: Dashboard
  },
])

For the second option, you may also want to optimize preloading the lazy components:

const Dashboard = lazy(() => import("./components/dashboard"))
const Landing = lazy(() => import("./components/landing"))

export default createBrowserRouter([
  { path: "/", loader, Component }
])

async function loader() {
  if (isAuthenticated()) { // check, somehow, if the user is authenticated
    import("./components/dashboard") // start preloading dashboard, no need to await it here
    return await getDashboardData() // fetch the data used by the dashboard
  }

  import("./components/landing") // start preloading landing if it's not
  return null
}

function Component() {
  let loaderData = useLoaderData()
  // if there's loaderData the user is authenticated, so you render Dashboard
  if (loaderData) return <Dashboard {...loaderData} />
  // otherwise render Landing
  return <Landing />
}

---

If you don't like this approach and you prefer to keep all in React state, then Declarative mode would be a better fit.

Also from your first message

because Framework mode require dev packages and I need a stable solution

Framework mode is stable, Shopify itself uses it, Docker Hub uses it. Any unstable feature in framework mode is marked as such and 100% optional to enable. If you meant @react-router/dev that's the package used in development only (e.g. to build the app) but it doesn't mean that it's unstable.

[XCanG]

That more or less close to answer it, but there is one problem with that example, I have general 4 states: unauthorized user, seller, clients and admin and some endpoints overlap same path even multiple times, in your first example you still had to declare different endpoint per state which wont work in my case, 2nd option may work but for every endpoint with overlap I would have to create new component to split them up, right now I have around 80 endpoints and around 50 of them overlap, some overlap multiple times and right now they structured in different subfolders, separated nicely per their account state, but using this method will practically double my routes code and create this ugly intermediate components that will only switch components and instead doing it once it will be duplicated per endpoint.

So if that the only usage cases it looks like this new mode doesn't fit at all in my codebase.

If you meant @react-router/dev that's the package

yes, it name looks like as if it is in development and not production ready.