React Router and route params

Question

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:

/username/something/overview

and

/username/overview

To resolve to the same thing.

First Attempt

I first tried to use the parenthesis to mark this as an optional parameter.

<Route path='/:username(/:shard)' component={ProfileContainer}>
  <IndexRoute component={OverviewContainer} />
  <Route component={MatchHistoryContainer} path='/:username/(/:shard)/history' />
  <Route component={DailyTrendsContainer} path='/:username/(/:shard)/trends' />
</Route>

However, the outcome of this is that username/history resolves to the root, because it thinks 'history' is the value of the shard routing parameter. So username/something/overview worked with this, but username/overview no longer worked.

Attempt 2

I took another run at it, by defining a whole new set of routes in the routing definition:

<Route path='/:username' component={ProfileContainer}>
  <IndexRoute component={OverviewContainer} />
  <Route component={MatchHistoryContainer} path='/:username/history' />
  <Route component={DailyTrendsContainer} path='/:username/trends' />
  <Route path='/:username/:shard' component={ProfileContainer}>
    <IndexRoute component={OverviewContainer} />
    <Route component={MatchHistoryContainer} path='/:username/:shard/history' />
    <Route component={DailyTrendsContainer} path='/:username/:shard/trends' />
  </Route>
</Route>

I put the history and overview 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.

With this approach, history and overview worked a treat! However, the urls with the shard parameter in them no longer worked, and resulted in a loop, because whenever it tried to render out, it failed.

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?

Answer 1

Yes we can put the optional params in the middle of the url, like this way:

<Route path='/test' component={Home}>
    <Route path='/test(/:name)/a' component={Child}/>
</Route>

don't use the / after test it will be the optional params for Home.

In ur 1st case just remove the / after username , it should work, try this:

<Route path='/:username(/:shard)' component={ProfileContainer}>
  <IndexRoute component={OverviewContainer} />
  <Route component={MatchHistoryContainer} path='/:username(/:shard)/history' />
  <Route component={DailyTrendsContainer} path='/:username(/:shard)/trends' />
</Route>