React Router и параметры маршрута

Question

У меня был просмотр, и я не мог найти ничего, что разрешило бы это для меня. У меня проблема с требованием маршрутизации, которое у меня есть в моем SPA. В середине URL-адреса есть необязательный параметр. Например, я хотел бы, как это:

/username/something/overview 

и

/username/overview 

Для решения одной и той же вещи.

Первая попытка

я впервые попытался использовать круглые скобки, чтобы отметить это в качестве дополнительного параметра.

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

Однако исход этого является то, что username/history решает корень, потому что он считает «история» является значением параметра shard маршрутизации. Так что username/something/overview работал с этим, но username/overview больше не работал.

Покушение 2

Я сделал еще один проход на него, определяя целый ряд новых маршрутов в определении маршрута:

<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> 

Я поставил историю и обзорные маршруты выше тех, у которых есть необязательные параметры, чтобы они сначала разрешались. Затем я объявлял дополнительные маршруты с параметром (но на этот раз не отмечен как необязательный), поэтому он разрешал бы те, кто попробовал те, которые я хотел.

При таком подходе история и обзор работал с удовольствием! Однако URL-адреса с параметром shard в них больше не работали и приводили к циклу, потому что всякий раз, когда он пытался отобразить, он не удался.

Мне было интересно, есть ли идиома или кто-то, у кого больше опыта работы с маршрутизатором, можно указать на что-то очевидное, я не хватает?

Answer 1

Да, мы можем поставить дополнительный params в середине URL, как этот путь:

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

не используют / после test будет дополнительный params для дома.

В Уре 1 случае просто удалите / после username, он должен работать, попробуйте следующее:

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