Question

我一直在尝试使用react-router来定义一系列带有可选参数的嵌套组件/路由，但也由路径占位符分隔。

即

/list
/list/1
/list/items
/list/1/items
/list/1/items/1

我假设两条<Route>路径类似于：

/list/:listId?
and
`${match.url}`/items/:itemId?`

但是，las .. "items"总是最终被接受为listId参数，因此/items的子路由永远不会匹配。

我在这里编写了一个通用示例（未完成解决方案）：https://stackblitz.com/edit/nesting-w-optional-params-react-router

我在Internet上看到了/root/:id1?/:id2?的示例，但是在参数之间/root/:id1/placeholder/:id2之间有占位符的地方，我所做的一切都没有。

使用react-router v4 + ??可以这样做吗？

Answer 1

找出了一种使用RR的children模式的解决方案，以始终显示嵌套的路由/组件，但随后在组件内部直接使用path-to-regexp进行路由匹配并从props.location.pathname获取相关的路线参数。

相关代码位：

render() {
    const pathRe = new PathToRegexp('/foo/:fooId?/bar/:barId?')
    const match = pathRe.match(this.props.location.pathname)
    if (!match) {
      return null
    }
    const barId = (this.props.match && this.props.match.params.barId) || match.barId
    return <h1>Bar <em>{barId}</em></h1>
  }

https://stackblitz.com/edit/nesting-w-optional-params-react-router-solution

如何使用多个可选参数和路径占位符呈现嵌套路由？

1 个答案: