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条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

react-router-创建没有组件嵌套的嵌套路由

来自分类Dev

react-router中的嵌套路由

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

React Router:如何匹配嵌套路由的不确定数量的子路径?

来自分类Dev

无法在React Router v5上打印嵌套路由的子组件

来自分类Dev

React Hooks:组件未在嵌套路由中呈现

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

在React-Router中找不到嵌套路由的字体

来自分类Dev

react-router v5 –嵌套路由

来自分类Dev

React Router 6 alpha 4嵌套路由

来自分类Dev

React Router Dom嵌套路由,或者如何传递

来自分类Dev

嵌套路由不适用于react-router

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

无法使用React Router获得嵌套路由以进行匹配

来自分类Dev

React-Router嵌套路由不起作用

来自分类Dev

React Router-无法渲染嵌套路由

来自分类Dev

React Router v4 - 嵌套路由问题

来自分类Dev

ReactJS-未呈现react-router嵌套路径

来自分类Dev

如何使用 React Router - ReactJS 添加嵌套和非嵌套路由?

来自分类Dev

react js 4中的嵌套路由

来自分类Dev

React Router V5:在动态路由中需要嵌套路由

来自分类Dev

React Router V5:在动态路由中需要嵌套路由

来自分类Dev

React Router:为什么嵌套路由使 React 在同一页面上呈现

来自分类Dev

如何使用react-router从嵌套路由的根目录重定向?

来自分类Dev

react-router的嵌套路由中的“ children”类型是什么?

来自分类Dev

React-Router活动类不适用于嵌套路由

来自分类Dev

在React Router中的嵌套路由中刷新后看到空白页

Related 相关文章

热门标签

归档