React Router und Route Params

Question

Ich hatte ein Durchsuchen und ich konnte nichts finden, das für mich löst. Ich habe ein Problem mit einer Routing-Anforderung, die ich in meinem SPA habe. Es gibt einen optionalen Parameter in der Mitte einer URL. Zum Beispiel würde Ich mag beide dies:

/username/something/overview 

und

/username/overview 

auf die gleiche Sache zu beheben.

erster Versuch

Ich versuchte zunächst, die Klammer zu verwenden, das als optionalen Parameter zu markieren.

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

jedoch das Ergebnis davon ist, dass username/history an der Wurzel löst, weil er denkt, ‚Geschichte‘ ist der Wert des shard Routingparameter. So hat username/something/overview mit diesem gearbeitet, aber username/overview funktioniert nicht mehr.

Versuch 2

nahm ich einen anderen Lauf es, durch eine ganze Reihe neuer Routen in der Routing-Definition definieren:

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

Ich habe die Geschichte und Übersicht Routen über denen mit den optionalen Parametern, so dass sie zuerst auflösen würden. Ich habe dann die zusätzlichen Routen mit dem Parameter deklariert (aber dieses Mal nicht als optional markiert), so dass es sich zu denen auflösen würde, nachdem es diejenigen versucht hatte, die ich wollte.

Mit diesem Ansatz, Geschichte und Überblick arbeitete ein Vergnügen! Die URLs mit dem shard-Parameter in ihnen funktionierten jedoch nicht mehr und führten zu einer Schleife, da jedes Mal, wenn sie versucht wurde, zu rendern, ein Fehler aufgetreten ist.

Ich fragte mich, ob es ein Idiom oder jemand mit ein wenig mehr Erfahrung von Reagieren Router könnte etwas offensichtlichen, dass ich vermisse?

Answer 1

Ja wir die optionalen params in der Mitte der URL setzen, wie auf diese Weise:

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

nicht die / nach test verwenden Sie wird es die optionalen params für zu Hause sein.

In ur ​​ersten Fall nur das Entfernen / nach username, sollte es funktionieren, versuchen Sie dies:

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