title: React Router and route params
body: <p>I've had a browse and I couldn't find anything solving this for me. I've got a problem with a routing requirement that I've got within my SPA. There is an optional parameter in the middle of a URL. For example, I would like both this:</p>
  
  <pre><code>/username/something/overview
  </code></pre>
  
  <p>and</p>
  
  <pre><code>/username/overview
  </code></pre>
  
  <p>To resolve to the same thing. </p>
  
  <p><strong>First Attempt</strong></p>
  
  <p>I first tried to use the parenthesis to mark this as an optional parameter.</p>
  
  <pre><code>&lt;Route path='/:username(/:shard)' component={ProfileContainer}&gt;
    &lt;IndexRoute component={OverviewContainer} /&gt;
    &lt;Route component={MatchHistoryContainer} path='/:username/(/:shard)/history' /&gt;
    &lt;Route component={DailyTrendsContainer} path='/:username/(/:shard)/trends' /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>However, the outcome of this is that <code>username/history</code> resolves to the root, because it thinks 'history' is the value of the <code>shard</code> routing parameter. So <code>username/something/overview</code> worked with this, but <code>username/overview</code> no longer worked.</p>
  
  <p><strong>Attempt 2</strong></p>
  
  <p>I took another run at it, by defining a whole new set of routes in the routing definition:</p>
  
  <pre><code>&lt;Route path='/:username' component={ProfileContainer}&gt;
    &lt;IndexRoute component={OverviewContainer} /&gt;
    &lt;Route component={MatchHistoryContainer} path='/:username/history' /&gt;
    &lt;Route component={DailyTrendsContainer} path='/:username/trends' /&gt;
    &lt;Route path='/:username/:shard' component={ProfileContainer}&gt;
      &lt;IndexRoute component={OverviewContainer} /&gt;
      &lt;Route component={MatchHistoryContainer} path='/:username/:shard/history' /&gt;
      &lt;Route component={DailyTrendsContainer} path='/:username/:shard/trends' /&gt;
    &lt;/Route&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>I put the <em>history</em> and <em>overview</em> routes above the ones with the optional parameters so that they would resolve first. I then declared the additional routes with the parameter (but this time not marked as optional) so it would resolve to those after it had tried the ones I wanted.</p>
  
  <p>With this approach, <em>history</em> and <em>overview</em> worked a treat! However, the urls with the <code>shard</code> parameter in them no longer worked, and resulted in a loop, because whenever it tried to render out, it failed. </p>
  
  <p>I was wondering if there is an idiom or someone with a little more experience of react router could point out something obvious I'm missing?</p>