React router: компонент не обновляется при изменении параметров поиска URL

Question

У меня есть приложение React, которое использует URL search params.В зависимости от значения search parameter v компонент должен отображать различное содержимое.

Возможный URL может выглядеть следующим образом:

http://localhost:3000/hello?v=12345

После изменения v query parameterв URL я бы хотел, чтобы мой компонент обновился.

http://localhost:3000/hello?v=6789

Я использую react-router в своем компоненте приложения для отображения различных компонентов в зависимости от маршрута.Компонент App заключен в компонент BrowserRouter.

render() {
  return (
    <Switch>
      <Route path="/hello" component={Hello}></Route>
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

Если пользователь нажимает на что-то и изменяется URL search param v, я бы хотел, чтобы компонент отображал другое содержимое.В настоящее время URL search param действительно изменяется, но компонент больше не отображается.Есть идеи?

Answer 1

Как правильно заметил @forJ, основная идея заключается в том, чтобы компонент рендерился после изменения параметров URL.Я добился этого примерно так:

render() {
  return (
    <Switch>
      <Route path="/hello" render={() => (<Hello key={this.props.location.key}/>)}></Route>
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

this.props.location.key меняется каждый раз, когда меняется URL (также если меняются параметры запроса).Таким образом, если вы передадите его в качестве реквизита для компонента, то компонент будет визуализироваться при изменении параметра URL, даже если base URL (URL без параметров URL) не изменилось.

Мне также пришлось использовать компонент высшего порядка withRouter, чтобы он работал.

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Hello));

Answer 2

Вы не предоставили достаточно информации, поэтому я не могу быть на 100% уверен, что вы идете не так, но сейчас я вижу одну проблему в вашем коде.Во-первых, вы должны сообщить маршрутизатору, что вы будете использовать параметры.Например, приведенный ниже код

render() {
  return (
    <Switch>
      <Route path="/hello/:yourParam" component={Hello}></Route> // you need the colon here
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

Выше будет указано, что маршрут, называемый yourParam, будет доступен из URL

Затем к нему необходимо получить доступ в вашем компоненте икаким-то образом поместить в функцию рендеринга (используйте ее для извлечения данных из базы данных, для рендеринга данных, просто для рендеринга параметров и т. д.).

Например, ниже

render(){
    <div>
        {this.props.match.params.yourParam}
    </div>
}

Таким образом, ваш компонент будет- выводить каждый раз при изменении параметра.

РЕДАКТИРОВАТЬ

Поскольку вы хотите использовать запрос вместо параметра, вам придется получить его, перейдя.this.props.match.query.v.Вы все равно должны убедиться, что переменная отображается в зависимости от изменения запроса