Prefixing all react links within the app

Question

I have several links throughout my react app that look like this:

<Route path="/linkpath" component={Whatever} />

or

<Link to="/linkpath">Click Me</Link>

Is there a quick/easy way to prefix all the links throughout the app with a predetermined string? ... perhaps via a Router configuration param?

So for example if my prefix is "/foo", all links to "/linkpath" would be converted to /foo/linkpath.

Note: Just to clarify, I'm using react-router-dom v4.0.0-beta.5

Answer 1

It turns out the Router in react-router-dom v4.0.0-beta.5 has a param called basename that addresses this scenario.

<Router basename="/foo">
  <Link to="/linkpath">Click Me</Link>
  <!-- other links here -->
</Router>

In this case, Click Me's link will be /foo/linkpath. So, as long as Router wraps all Components in the app, all links will be prefixed with basename.

One important note: Make sure the string in basename starts with a slash; i.e., use "/foo" instead of "foo". The latter one produces undesired behavior when clicking links (it appends the full link path to the existing URL everytime you click the link, instead of replacing it).