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

地质男孩

我正在尝试创建如下所示的路线:

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仅加载该容器(而不是父容器),即:相册容器在第二条路径中加载,而不在User容器中加载。

我尝试过但仍未奏效的方法是将它们嵌套或一个接一个地嵌套,或使用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任何想法或指针在这里将不胜感激!

谢谢!

ebuat3989

需要记住的几件事:

  1. 路线的顺序很重要。
  2. 使用: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} />

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章