ReactJS - перерисовать тот же компонент при переходе назад

Question

У меня есть структура URL, такая как

foo.com/details/:id

, и я использую ReactRouter.Если вы выполняете поиск по идентификатору «123», компонент выводит конкретную информацию из базы данных и обновляет URL-адрес до

foo.com/details/123

Если вы ищете другой идентификатор «456», URL-адресобновляется до

foo.com/details/456

с короткими словами this.props.history.push(${this.state.id});

- компонент перерисовывается.Если вы перезагрузите или перейдете непосредственно к идентификатору с URL-адресом, параметр будет работать так, как ожидалось.Но вот мой вопрос: если вы нажмете кнопку «Назад» в браузере, URL обновится правильно (456 => 123), но компонент не выполнит повторную визуализацию.

Как заставить компонент выполнитьперерисовать при изменении параметра URL?

РЕДАКТИРОВАТЬ: больше кода

В конструкторе:

 if (this.props.match.params.id !== undefined) {
            this.state.id = this.props.match.params.id;
            this.getData(this.state.id)
}

В классе:

 <form onSubmit={this.handleSubmit}>
  <input type="text" className="form-control mx-sm-3 mb-2" placeholder="Enter ID"value=             
         {this.state.id} onChange={this.handleChange}/>
  <input type="submit" value="Search" className="btn btn-primary mb-2"/>
</form>

handleChange(event) {
      this.setState({id: event.target.value})
}

handleSubmit(event) {
      this.props.history.push(`${this.state.id}`);
      this.getData(this.state.id);
      event.preventDefault();
}

Answer 1

Компонент не рендерится при смене реквизита.Поэтому, когда компонент уже смонтирован с идентификатором 123 и вы обновите идентификатор до 456, повторное рендеринг не сработает.Вам нужно будет запустить обновление, обновив состояние.Я предлагаю вам использовать componentDidUpdate вместо componentWillReceiveProps, поскольку он помечен как UNSAFE, что означает, что он может быть объявлен устаревшим в следующих версиях React.Вы можете componentDidUpdate или componentShouldUpdate.Ниже приведена реализация с использованием componentDidUpdate.

componentDidUpdate(prevProps, prevState) {
  if (this.props.match.params.id !== prevProps.match.params.id) { 
     this.setState({ id: this.props.match.params.id}); 
     this.getData(this.props.match.params.id);
    // or any other logic..
  }
}

Answer 2

Когда url указывает на same component, компонент не отключается и не монтируется, вместо этого ему передается один и тот же компонент с разными подпорками.Здесь есть несколько способов добиться желаемого поведения.

1. Если вы можете указать key (использовать ID) для корневого элемента, который смонтирован. (Ключ должен бытьна элемент, который использует Id и делает что-то, а не с ним).Если вы не можете найти правильный элемент для достижения этого, переходите к следующему.

2. Используйте componentWillReceiveProps и сравните nextProps id и currentProp id и написать логику для повторной инициализации компонента для нового идентификатора.

   componentWillReceiveProps(nextProps) {
    if (this.props.id !== nextProps.id) {
      // write your logic to update the component with new ID 
    }
   }