获取正确的数据，在反应中收听URL

Question

我使用react-router-dom来浏览我的组件。 当我重定向到详细信息组件时，我在URL的后面给出了一个item.name。

 const selectedBeerID = '/beerItem/' + this.props.beers.selectedBeerItem.name;
        return <Redirect to={selectedBeerID}/>;

所以网址就像http://localhost:3000/beerItem/newName我想在我的重定向页面中获取最后一个参数“newName”，所以我能够在我的详细信息组件中从我的后端获取正确的BeerItem。有人能告诉我一个很好的方法来实现这一目标吗？非常感谢！

Answer 1

我认为你正在寻找网址参数。从反应路由器4的文档中，为您的案例进行自定义：

<Route path="beerItem/:newName" component={Child} />

const Child = ({ match }) => (
  <div>
    <h3>{match.params.newName}</h3>
  </div>
);

如果您需要其他信息，请与我们联系。

Answer 2

如果你的Router中有类似的东西（你应该）：

<Route exact path={`/beerItem/:itemName`} component={BeerItemComponent} />

然后你可以通过

访问BeerItem组件中的路径参数

componentDidMount() {
  const {match: { params: { itemName } } } = this.props
  console.log(itemName) // do something with it.
}

注意 BeerItemComponent 应该包含withRoute HOC以访问路径参数或使用mapStateToProps。

Here是React Router docs的有用链接。