Обновление реагирующих компонентов при изменении строки запроса

Question

Мне нужен компонент для повторного рендеринга, когда другой компонент изменяет строку запроса / поиска.

Для изменения URL я использую history.push ():

private updateURL(date: Date) {
    const url = `/?date=${formatDate(date)}`; // /?date=2019-01-01
    history.replaceState(
        {},
        `Dashboard for ${formatDate(date)}`,
        url
    );
}

В моемНа панели навигации я хочу обновить свои ссылки, чтобы они могли совместно использовать строку запроса между URL-адресами.Это работает, если я использую withRouter:

class Sidebar extends React.Component {
    public render(){
        return <Link to={`/anotherPage?${this.props.location.search}`}>Visit</Link>;
    }
}

export default withRouter(Sidebar);

Если я использую объект Redirect вместо history.push (), боковая панель обновляется как следует, и это нормально.Означает ли это, что он размонтирует весь вид, отобразит перенаправление, а затем перемонтирует весь вид?Это было бы нежелательно, если это означает, например, размонтирование и перемонтирование сложных карт svg.

constructor(props){
  super(props);
  this.state = {
    redirect: null;
  }
}

private updateURL(date: Date){
  this.setState({
    redirect: `/?date=${formatDate(date)}`
  });
}

public render(){
  if (this.state.redirect){
    return <Redirect to={this.state.redirect} />;
  } else {
    // render dashboard, map, charts, etc.
  }
}

Если я не могу или не хочу использовать <Redirect />, есть ли альтернатива, которая приведет к обновлению боковой панели?когда строка запроса изменяется из-за history.push?

Answer 1

Вы можете легко проверить это, например, поместив console.log в componentDidMount, но учитывая, как работает React, я верю, что он будет размонтирован / смонтирован, как вы и предполагали.Так что лучшим решением было бы использовать history.replace() API, который также обеспечивает реагирующий маршрутизатор:

private updateURL(date: Date){
  this.props.history.replace(`/?date=${formatDate(date)}`);
}