Повторно отобразить тот же компонент при изменении URL-адреса в реакции

Я просто столкнулся с похожей проблемой. Я думаю, вы объединяете обновление / перерисовку и перемонтирование. Диаграмма Этот на методах жизненного цикла реакции помогла мне, когда я имел дело с ней.

Если ваша проблема похожа на мою, у вас есть такой компонент, как

class Card extend Component {
  componentDidMount() {
    // call fetch function which probably updates your redux store  
  }

  render () {
    return // JSX or child component with {...this.props} used, 
           // some of which are taken from the store through mapStateToProps
  }
}

В первый раз, когда вы нажимаете URL-адрес, по которому монтируется этот компонент, все работает правильно, а затем, когда вы посещаете другой маршрут, который использует тот же компонент, ничего не меняется. Это потому, что компонент не перемонтируется, он просто обновляется из-за изменения некоторых свойств, по крайней мере, this.props.match.params.

Но componentDidMount() не вызывается при обновлении компонента (см. Ссылку выше). Таким образом, вы не будете получать новые данные и обновлять свое хранилище redux. Вам следует добавить функцию componentDidUpdate(). Таким образом, вы можете снова вызывать свои функции выборки при изменении свойств, а не только тогда, когда компонент изначально смонтирован.

componentDidUpdate(prevProps) {
  if (this.match.params.id !== prevProps.match.params.id) {
    // call the fetch function again
  }
}

Проверьте реакцию документация для более подробной информации.

В React Router v4 добавление тега коммутатора после того, как маршрутизатор устраняет проблему

На самом деле я придумал другой способ сделать это.

Начнем с вашего примера кода: <Route path='/:code' component = {Card}/>

Что вы хотите сделать, так это сделать так, чтобы <Card> был компонентом оболочки, предпочтительно функциональным (на самом деле ему не нужно какое-либо состояние, я не думаю) и визуализировать компонент, который вы хотите визуализировать, передав свои реквизиты с помощью {...props}, чтобы он получает свойства маршрутизатора, но, что важно, дает ему свойство key, которое заставит его повторно визуализировать с нуля

Так, например, у меня есть что-то вроде этого:

<Route exact = {false} path = "/:customerid/:courierid/:serviceid" component = {Prices} />

И я хотел, чтобы мой компонент перерисовывался при изменении URL-адреса, но ТОЛЬКО при изменении customrid или serviceid. Итак, я превратил Prices в такой функциональный компонент:

function Prices (props) {
    const matchParams = props.match.params;
    const k = `${matchParams.customerid}-${matchParams.serviceid}`;
    console.info('render key (functional):');
    console.info(k);
    return (
        <RealPrices {...props} key = {k} />
    )
}

Обратите внимание, что мой ключ учитывает только Customerid и serviceid - он будет повторно отображен, когда эти два изменятся, но он не будет повторно отображаться при изменении courierid (просто добавьте это в ключ, если хотите). И мой компонент RealPrices получает то преимущество, что по-прежнему передаются все параметры маршрута, такие как история, местоположение, совпадение и т. д.

Включение текущего местоположения в качестве ключа на компоненте решает проблему.

<Route path='/:code' component = {(props) => <Card {...props} key = {window.location.pathname}/>}/>