Use custom route component as child of Switch ?

[Jiiieeef]

Hello !

I am working on restricted routes following certains conditions for our users and I would like to know if my current solution is good practice or not.

const RestrictedRoute = ({ children, ...props }) => {
  const isRestrictedRole = currentUserIsRestricted()

  return isRestrictedRole ? <NotFound /> : <Route {...props}>{children}</Route>
}

const Routes = () => {
  return (
    <Switch>
      <Route path="/">
        <Home />
      </Route>

      <RestrictedRoute path="analytics">
        <Analytics />
      </RestrictedRoute>
    </Switch>
  )
}

Or if this isn't a good practice, can I wrap my restricted routes in a React.Fragment ?

[timdorr]

You can't wrap your routes in anything under Switch. It directly reads the props of its children to do route matching. So it would treat <RestrictedRoute> like a path-less route and would always match, regardless of whatever path you have on components underneath it.

[Jiiieeef]

Sorry, my snippet wasn't complete, I've added

<RestrictedRoute path="analytics">
  <Analytics />
</RestrictedRoute>

The properties send to my RestrictedRoute component have the type RouteProps, so do you think it's valid in this case ?
I've take a lot of how Sentry allow to wrap Route for reporting (with Sentry.withSentryRouting) and they do (more or less) the same thing

[lucasvienna]

I'd like to follow up on this. Our team is also working with route guards (aka permission-based routes) and on v5 wrapping routes was the way to go for us. Since the v6 beta came out, we've had to pivot: now routes that need a guard get wrapped with an expression guard around them.

So we went from:

<Routes>
  <Route path="/" element={<Home />} />

  <RouteGuard perm="ADMIN" path="/admin" element={<Admin />} />
  <RouteGuard app="FORUM" path="/forum" element={<Forum />} />
  <RouteGuard app="FORUM" perm="MOD" path="/forum/moderation" element={<ForumMod />} />
</Routes>

to using something like this:

<Routes>
  <Route path="/" element={<Home />} />

  {hasApp('FORUM') && <Route path="/forum" element={<Forum />} />}
  {hasApp('FORUM') && hasPerm('MOD') && <Route path="/forum/moderation" element={<ForumMod />} />}
</Routes>

While functional, we found it much easier to read and write routes with the previous custom route component. Is there a new, semantic, more recommended way of achieving this? While the current approach works, it isn't as elegant/readable as the old one.

[mjackson]

Lots of ways you could do this. You just need to move your composition into the element prop.

You could stay with your current model:

let routes = (
  <Routes>
    <Route path="/" element={<Home />} />

    <Route
      path="/forum"
      element={hasApp("FORUM") ? <Forum /> : <NoSuchApp />}
    />
    <Route
      path="/forum/moderation"
      element={
        hasApp("FORUM") && hasPerm("MOD") ? <ForumMod /> : <PermissionDenied />
      }
    />
  </Routes>
);

Or have your own <Guard> element do the logic, similar to what you did before in v5:

function Guard({ app, perm, element }) {
  if (app == null || hasApp(app)) {
    if (perm == null || hasPerm(perm)) {
      return element;
    }
    return <PermissionDenied />;
  } else if (perm == null || hasPerm(perm)) {
    return element;
  }
  return <NoSuchApp />;
}

let routes = (
  <Routes>
    <Route path="/" element={<Home />} />

    <Route path="/forum" element={<Guard app="FORUM" element={<Forum />} />} />
    <Route
      path="/forum/moderation"
      element={<Guard app="FORUM" perm="MOD" element={<ForumMod />} />}
    />
  </Routes>
);

Note that both examples are slightly different from what you're currently doing in v6, where the routes don't even exist if the user doesn't have the right app/perms.

The best thing about this is you don't have to create your own component (RouteGuard) that expects all our Route props anymore. Guard only takes props that it cares about, which is a much cleaner separation of API.

[lucasvienna]

Thank you for the suggestions, this is a great jumping point. I agree on the separation, it is indeed much cleaner 👍🏻