How to reference a route symbolically?

[jrr]

I like filesystem -based route organization, but one thing I'm missing is a good way to reference routes symbolically. What I mean is, instead of linking like this:

<Link to="/home">Home</Link>

I'd prefer to be able to import something shared, that resolves to /home. I often wind up building it myself:

import { appRoutes } from "../app-routes";

<Link to={appRoutes.home}>Home</Link>

This way you get some safety from typos, squiggles, etc., and the task of altering your routes becomes much more tenable.

But when I build it myself, I'm maintaining a second list of routes, with no means of enforcing that it's consistent with what I've laid out on the filesystem.

I haven't surveyed lately if other frameworks have a better answer for this, but I thought it might be of interest to Remix, given the project's pedigree and focus on routing. Is this something Remix has considered? Are there some (perhaps undocumented) APIs that might help in the implementation of appRoutes above, ensuring consistency with the routes defined in the filesystem?

Maybe a code generator could give me type-safe access to all the routes in the app. Or an official API could allow me to reference routes in a way that would provoke a build error if they cannot be resolved.

Curious to hear your thoughts!

[sergiodxa]

There are packages that gives you that feature, e.g. yesmeck/remix-routes. The way it works if you want to do it yourself is that use remix routes --json to grab the list of routes and then parse the JSON to generate the type-safe object.

[jrr]

This is great, thanks! Using it out-of-the-box for now, but it's good to see that --json is available if we want to go deeper.