React-Router не отключается при изменении параметра местоположения

Question

Эта проблема сводит меня с ума, у меня есть простое маленькое приложение, созданное create-реагировать-приложение, и я использую React-Router.

Вот так выглядит мой jsx:

<Router>
    <Route path="/pages/:pageId" component={Page} />
</Router>

В компоненте Page у меня есть выборка для componentDidMount, он работает, как и ожидалось, при первой загрузке маршрута. Например, я захожу: / pages / 13, а затем он получает эти страницы данных. Но когда я нахожусь на: / pages / 13 и затем нажимаю на компонент Link (импортированный из React-Router), перенаправляющий меня на: / pages / 15. Затем реквизиты pageId обновляются, но никогда не воспроизводятся повторно, компонент Page никогда не запускает componentWillUnmount до или componentDidMount после.

Ожидаемое поведение:

1. Посещение: "/ pages / 13" -> render () -> componentDidMount () -> render ()
2. Нажмите на ссылку Компонент "/ pages / 15" -> componentWillUnmount () -> render () -> componentDidMount () -> render ()

Я использую следующие версии:

• Реакция: 16.3.2
• Реакция-дом: 16.3.2
• response-router-dom: 4.2.2

Что я делаю не так? Я все еще довольно новичок в React, так что будьте милы:)

Answer 1

Когда параметр изменяется, ваш Route не перемонтирует ваш компонент. Это ожидаемое поведение. Вы должны отследить изменение параметра с помощью componentWillReceiveProps, иначе, если вы хотите принудительно перемонтировать, вы должны использовать <Route path="/your/path/with/:id" render={props => <Component {...props} key={props.params.id} />

Answer 2

Ваша проблема в том, что componentDidMount выполняется только тогда, когда компонент полностью смонтирован, и это происходит только один раз. В этом случае изменение параметра маршрута не приводит к изменению компонента, я имею в виду, что вы все еще находитесь в том же компоненте, когда вы изменяете pageId, поэтому componentDidMount никогда не выполняется снова. Что вы могли бы сделать тогда? Хорошо, я предлагаю вам изучить метод componentWillReceiveProps(newProps), он выполняется всякий раз, когда собирается изменить реквизит компонента, что в данном случае является тем, что вы ищете, потому что, согласно это

Вы будете иметь доступ к объектам соответствия в разных местах: Компонент маршрута как this.props.match; Маршрут отображается как ({match}) => (); Направляйте детей как ({match}) => (); withRouter as this.props.match; matchPath в качестве возвращаемого значения;

объект соответствия (который содержит параметры маршрута) передается через реквизиты компонента.

Итак, короткий ответ. Используйте componentDidMount для первой выборки, а затем componentWillRecieveProps(newProps) для всех остальных вызовов.

проверьте это для получения дополнительной информации.

Примечание: я не знал, что componentWillRecieveProps(newProps) должен был быть несколько устаревшим, в любом случае, он предлагает вам использовать getDerivedStateFromProps(nextProps, prevState), который в основном такой же