получить правильные данные, слушая URL в реакции

Question

Я использую реагирующее-маршрутизатор-дом для навигации по моим компонентам.Когда я перенаправляю на подробный компонент, я даю item.name в конце URL.

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

, поэтому URL будет выглядеть как http://localhost:3000/beerItem/newName Я хотел бы получить последний параметр "newName "на моей странице перенаправления, поэтому я могу выбрать нужный BeerItem из моего бэкенда в моем компоненте детализации.Может кто-нибудь сказать мне хороший способ достичь этого?большое спасибо!

Answer 1

Если у вас есть что-то подобное в вашем 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.

Здесь является полезной ссылкой отReact Router docs.

Answer 2

Я думаю, что вы ищете параметры URL.Из документации на реагирующий маршрутизатор 4 с настройками для вашего случая:

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

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

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.