Question

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

http://www.domain.com/@username＆amp;

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

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

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

它们单独工作但我不能让它们两个一起工作，其中每个Route只加载该容器（不是父容器，即：Album 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>

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

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：嵌套路由，不使用通配符路径嵌套组件

1 个答案: