title: Programmatically navigate using react router without duplicating paths
body: <p>I've read <a href="https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router">this</a> post, but I don't like having <code>browserHistory.push('/some/path')</code> in one of my components while I have <code>&lt;Route path="/some/path" component={SomePage} /&gt;</code> in my router file since the path is duplicated. What if I want to change that path to <code>/another/path</code>? Now I need to remember to update it in the router file and also my component.</p>
  
  <p>Is there a better way around this? I was thinking that I could have <code>"/some/path"</code> and all my other paths defined in some constants file that gets imported and referenced in my router and my component. Example:</p>
  
  <p><strong>paths.js</strong></p>
  
  <pre><code>var Paths = {
      myPath: "/some/path",
      ...
  }
  module.exports = Paths
  </code></pre>
  
  <p><strong>router.jsx</strong></p>
  
  <pre><code>var Paths = require('constants/paths');
  ...
  &lt;Route path={Paths.myPath} component={SomePage} /&gt;
  </code></pre>
  
  <p><strong>component.jsx</strong></p>
  
  <pre><code>var Paths = require('constants/paths');
  ...
  browserhistory.push(Paths.myPath)
  </code></pre>
  
  <p>This seems like it could get a little messy when dealing with URL parameters like <code>/some/path/:id</code>, so I was hoping there might be a better way.</p>