title: Why react-router combines previous route with a new one?
body: <p>Here is my Router.js file</p>
  
  <pre><code>// imports here
  
  export default () =&gt; (
    &lt;Router&gt;
      &lt;App&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route exact path="/users" component={Users} /&gt;
        &lt;Route path="/users/:id" component={User} /&gt;
        &lt;Route path="/about" component={About} /&gt;
      &lt;/App&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p>and my App.js file</p>
  
  <pre><code>const App = props =&gt; (
    &lt;div&gt;
      &lt;nav&gt;
        &lt;Link to="/"&gt;Home&lt;/Link&gt;
        &lt;Link to={{ pathname: '/users', state: { prevPath: props.location.pathname } }}&gt;Users&lt;/Link&gt;
        &lt;Link to="about"&gt;About&lt;/Link&gt;
      &lt;/nav&gt;
      {props.children}
    &lt;/div&gt;
  );
  
  export default compose(withRouter)(App);
  </code></pre>
  
  <p>When I select '/users' path and then click on any user to navigate to '/users/:id', it works fine and route is <a href="http://localhost:3000/users/some-user-id" rel="nofollow noreferrer">http://localhost:3000/users/some-user-id</a>. But when I want to navigate after this route to a route '/about'</p>
  
  <p>url address becomes <a href="http://localhost:3000/users/about" rel="nofollow noreferrer">http://localhost:3000/users/about</a> , instead of <a href="http://localhost:3000/about" rel="nofollow noreferrer">http://localhost:3000/about</a> ? What am I doing wrong ?</p>