solid-router icon indicating copy to clipboard operation
solid-router copied to clipboard

[feat] Conditional routing

Open jamesbradlee opened this issue 3 years ago • 2 comments

My feature request is simple, adding conditional routing. The proposal is to add two properties from the Show component into the RouteDefinition interface.

  • when: () => boolean
  • fallback: () => JSX.Element | string | Array<JSX.Element | string>

if when is not defined, use a default value that always computes to true. If the computed value of when() is false render fallback() instead of component or element.

In my opinion this allows a much cleaner syntax for creating routes that should only be available when certain conditions are met. If the conditions are not met it offers a simple way to show the end-user that some condition was not met. If fallback is not defined, treat the route as it is a 404.

jamesbradlee avatar Feb 18 '23 22:02 jamesbradlee

In some sense this is doable already by conditionally loading a <Navigate> component or the actual component for the route.

fabiospampinato avatar Mar 12 '23 14:03 fabiospampinato

I think I have another use case for conditional routing. Suppose you're working on a very large web app with lots of routes. But as a developer a specific feature you want to work on only requires a small subset of those routes to get created. You only want that small subset to be built because you want your initial boot time to be snappy. How can we accomplish this with solidjs router?

Some ideas I had were:

  1. Specify a regex ENV var (for example, PUBLIC_ROUTES_REGEX=/my/route would only generate the components for "/my" and "/my/route")
  2. Perform a git diff to main branch and based on the components changed, only build routes for those pages that depended on those components.
  3. Lazify all routes somehow? Assuming the app routes were defined through a team collaboration, with not all routes being defined lazy, perhaps a dev would wish to lazify all routes.

I think 2 is may be more difficult to implement than 1 but any of them may provide faster developer experience.

Perhaps if there was a hook solid-router could give us "updateRoutes" or something we could use in our vite config (or in a vite plugin) that may be ideal since we wouldn't have to mess with the commenting out code in the app. Thoughts?

richardeschloss avatar Jul 17 '23 17:07 richardeschloss