React-Router：嵌套路由而不嵌套具有通配符路径的组件

Question

我正在尝试创建如下路线：

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

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

对于第一个，我将路线设置为： <Route path = "@*" view = "Full" component = {UserContainer} />

对于第二个，我将路线设置为： <Route path= "@*/:albumSlug" view = "Full" component = {AlbumContainer} />

它们单独工作但我无法让它们一起工作，其中每个 Route 仅加载该容器（而不是父容器，即：Album Container 在第二条路线中加载而不是 User Container ).

我已经尝试但尚未奏效的是将它们嵌套或将它们一个接一个地放置，或者使用 IndexRoute（全部在下方）

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

所以，长话短说，有没有一种方法可以让两条看似嵌套但在处理带有通配符的路径时不需要嵌套组件的路由？理想情况下，这适用于多级嵌套 - 如果我还支持以下 URL：

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

我觉得我在理解嵌套路由或IndexRoute方面缺少一些东西。如有任何想法或建议，我们将不胜感激！

谢谢！

Answer 1

需要记住的几件事：

路线的顺序很重要。
为了清楚起见，在适当的时候使用 :paramName 而不是 *

尝试以下方法之一：

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

React-Router：嵌套路由而不嵌套具有通配符路径的组件

React-Router: Nesting routes without nesting components with wildcard paths

reactjs

react-router