Reagieren-Router: Nesting Routen ohne Verschachtelung Komponenten mit Wildcard-Pfade

Question

Ich versuche, Routen zu erstellen wie folgt aus:

http://www.domain.com/@username &

http://www.domain.com/@username/album-slug

Für die erste, stelle ich meinen Weg nach oben wie: <Route path = "@*" view = "Full" component = {UserContainer} />

Für die zweite, stelle ich meinen Weg nach oben wie: <Route path= "@*/:albumSlug" view = "Full" component = {AlbumContainer} />

Sie arbeiten wenn alleine, aber ich kann nicht beide zusammen arbeiten, wobei jede Route nur diesen Container lädt (nicht der übergeordnete Container, dh: der Album Container ist in der zweiten Route geladen und nicht der User Container) .

Was ich versucht habe, und arbeitete noch nicht, sie nistet oder sie einer nach dem anderen mit einer, oder mit IndexRoute (alle unten)

/* Nesting - didn't work */ 
<Route path = "@*" view = "Full" component = {UserContainer} > 
    <Route path= "@*/:albumSlug" view = "Full" component = {AlbumContainer} /> 
</Route> 

/* Sequential - didn't work */ 
<Route path = "@*" view = "Full" component = {UserContainer} /> 
<Route path= "@*/:albumSlug" view = "Full" component = {AlbumContainer} /> 

/* IndexRoute - didn't work */ 
<Route path = "@**" > 
    <IndexRoute view = "Full" component = {UserContainer}/> 
    <Route path= "@*/:albumSlug" view = "Full" component = {AlbumContainer} /> 
</Route> 

So lange Geschichte kurz, ist es eine Möglichkeit, zwei Routen zu haben, die scheinbar verschachtelt sind, aber keine verschachtelten Komponenten benötigen, wenn es um Pfade mit Platzhaltern geht? Ideal für mehrere Ebene der Verschachtelung, das funktionieren würde - wenn ich auch URLs unterstützt wie war:

http://www.domain.com/@username/album-slug/image-slug http://www.domain.com/@username/comments

Ich fühle mich wie ich etwas im Verständnis von verschachtelten Routen oder IndexRoute bin fehle. Irgendwelche Ideen oder Hinweise würden hier sehr geschätzt werden!

Vielen Dank!

Answer 1

Ein paar Dinge zu erinnern:

1. Die Reihenfolge der Routen Angelegenheiten.
2. Verwenden :paramName über *, wenn dies für Klarheit

einer von diesen Versuchen:

// IndexRoute 
<Route path="@:username"> 
    <IndexRoute view="Full" component={UserContainer} /> 
    <Route path=":albumSlug" view="Full" component={AlbumContainer} /> 
</Route> 

// Sequential 
<Route path="@:username/:albumSlug" view="Full" component={AlbumContainer} /> 
<Route path="@:username" view="Full" component={UserContainer} />