title: React Router Link: Change single param
body: <p>I have routes as follows:</p>
  
  <pre><code>&lt;Provider store={store}&gt;
      &lt;Router history={browserHistory}&gt;
        &lt;Route path={'/'} component={App}&gt;
          &lt;IndexRoute component={MapContainer} /&gt;
          &lt;Route path={'/about'} component={About} /&gt;
          &lt;Route path={'/resources'} component={Resources} /&gt;
          &lt;Route path={'/:year'} component={MapContainer} /&gt;
          &lt;Route path={'/:year/:region'} component={MapContainer} /&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;
  </code></pre>
  
  <p>After <code>/:year</code> and <code>/:year/:region</code>, the list of routes will grow significantly (e.g., <code>/:year/:region/:country</code>).</p>
  
  <p>I have a link to change years, but I only want to change the <code>year</code> parameter so that a link on the <code>/2013/northern-africa/morocco</code> can link to <code>/2006/northern-africa/morocco</code>. Essentially, I want it to maintain all the parameters after <code>year</code>.</p>
  
  <p>I have this:</p>
  
  <pre><code>const years = ['2013', '2006', '2002', '1998', '1995'];
  const yearLinks = years.map(y =&gt; (&lt;li className={y === this.props.params.year ? 'current' : null}&gt;
    &lt;Link to={`/${y}/${this.props.params.region}`}&gt;{y}&lt;/Link&gt;
  &lt;/li&gt;));
  </code></pre>
  
  <p>This is essentially filling up</p>
  
  <pre><code>&lt;ul&gt;
    {yearLinks}
  &lt;/ul&gt;
  </code></pre>
  
  <p>This only works for region, and I don't want to do something like <code>for param, value in this.props.params</code>, and then just append all the params. Seems like <code>react-router</code> should be able to handle that. Also, the order of the params won't likely come back in the order that I'll need them to make a valid URL.</p>