generatePath counterpart

[af-ffx]

Coming from react-router I used generatePath a lot to interpolate params in route paths. Is there a react-location counterpart I could use for that task?

Looking through the docs, I could not find a similar function. I found interpolatePath in the code, which seems to be doing exactly what I'm looking for. Unfortunately it's not exported.

[sethbro]

I'm very curious about this as well. Rolling our own interpolation is simple enough, but we currently define route paths as constants, which makes the system easier to update if the URL structure changes.

Example:

const AppRoutes = {
  PROJECT_PAGE: '/t/:tenantName/projects/:projectId'
};

<Link to={generatePath(AppRoutes.PROJECT_PAGE, { tenantName: 'foo', projectId: 'bar' })}>View Project</Link>

Is this possible with React Location? The tree definition structure does not easily allow extraction of a complete path. I don't like the idea of hard coding paths as strings every time we specify a link or redirect URL. Any recommended approaches for this?

[Faithfinder]

Well, you don't have to use children (nesting), you can define routes in a flat structure and than this approach will work fine

[sethbro]

Quite true, but you lose the parent component benefits of children that way.

After some experimentation, I do think flatter definitions are better if you don't need a parent component. And I've come to some peace with exposing simple routes as named constants & providing helper functions for more complicated routes.

An equivalent to react-router's generatePath would still be a huge help.

[Faithfinder]

It would be cool to have a utility to get the link builder generated from routes, eg

const navigator = createLinkBuilder(routes);

<Link to={navigator.author.posts.post({
  authorId: 123,
  postId: 456
}))}