Question

我想从react-router-dom这样的URL http://localhost/tag/news/local/tour中获取并显示多个参数中的单个参数。该URL具有三个参数，最后两个是可选的。

以下是路线和组成部分：

// routes.js
<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/tag/:slug/:slug1?/:slug2?" component={Archives} />
    <Route path="*" component={ErrorPage} />
</Switch>

// Component: RenderTags.js
const RenderTags = props => {

  console.log(props.match.params) // output ==> Object{slug: "news", slug1: "local", slug2: "tour"}

  let taglists = '';

  if(props.match.params.slug1 !== undefined) {
    taglists = props.match.params.slug1
  } else if(props.match.params.slug2 !== undefined) {
    taglists = props.match.params.slug2
  } else {
    taglists = taglists = props.match.params.slug
  }

  return (
    <div>
      <h1>Tags</h1>
      Tag Slug: {taglists}
    </div>
  )
}

但是，它仅在第一个和第二个起作用，第三个不起作用。例如，如果我访问该完整URL，则会得到这个Tag Slug: local而不是Tag Slug: tour。

如何解决？任何帮助将不胜感激。

注意：我对props.match.url.split('/').pop()使用了一种简单的方法（可能是最后一种选择），它可以工作，但是我仍然好奇是否有与我相关的其他方法问题。

致谢

如何从react-router-dom中的多个参数中获取单个参数？

0 个答案: