React Router: Linking to Route instead of URL?

[danburzo]

When using react-router, is there a way to make <Link> components that don't have a hardcoded URL in them? e.g. instead of <Link to='/dashboard/projects'>, have <Link to=' ... projects route... '>. Or, otherwise, have a way to keep the Route definitions in sync with the various Links floating about in the app.

I find it annoying to have to double-check all the Links whenever I shuffle the Route definitions around.

[vladzelinschi]

Hopefully I'm getting the question right, so please correct me if I misunderstood. You want to be able to change the route string in one place, w/o checking all Link usages in the app. With this idea in mind...

Let's say you have a module in your app:

const ROUTES = {
  PROJECTS: 'dashboard/projects',
  // other here...
};

export default ROUTES;

Then in your other modules you can:

import { Link } from 'react-router';
import Routes from '/path/to/routes/module';

<Link to=`${Routes.PROJECTS}`> // take advantage of template string from ES6 ;)

Is this what you want?

[alexnm]

react-router had a name prop that you could add to a <Route />, Docs. There was a discussion when upgrading to 1.0 and they removed it

remix-run/react-router#1840

[vladzelinschi]

As a side advice, I strongly suggest moving to v4. It's just components. Much easier to digest. Versions of RR < 4 have a crappy API. Worse than Nicolas Cage's acting skills.

[alexnm]

Totally agree with RR4, but I haven't found a good solution for the way in which you perform server side rendering with prefetching data with RR < 4. I'm investigating it actually these days :)

[danburzo]

@alexnm the name parameter was exactly what I was looking for, I'll read into the decision to remove it.

@r31gn yes, you understood correctly my intent, and your idea might help make it easier to manage Links. However, I was thinking about something that is, in addition to that, correlated with the Route definitions. Also, I'll give v4 a look, thanks for the tip!

[vladzelinschi]

@alexnm It's not straightforward. I bumped into that as well. Also, code splitting + lazy loading with Webpack. Every tutorial you'll find make use of System.import, require.ensure and route hooks (onEnter). These no longer exist in RR 4, so the tutorials are not too helpful. I've wanted to investigate and write an article about this, but had little time.

Throw me some resources if you find smth interesting?

[danburzo]

Alright, I am closing this as I have been illuminated :) Since URLs tend to change only at development time, we can muster the courage to manage a few dozen Links across the app, without introducing extra complexity into RR 3. Thanks!