Компонент не восстанавливается при изменении параметров маршрута

Я работаю над реагирующим приложением с помощью реактивного маршрутизатора. У меня есть страница проекта с URL-адресом:

myapplication.com/project/unique-project-id

Когда компонент проекта загружается, я запускаю запрос данных для этого проекта из события componentDidMount. Я сейчас столкнулся с проблемой, когда я переключаюсь непосредственно между двумя проектами, так что только идентификатор изменяется так...

myapplication.com/project/982378632
myapplication.com/project/782387223
myapplication.com/project/198731289

componentDidMount не запускается снова, поэтому данные не обновляются. Есть ли еще одно событие жизненного цикла, которое я должен использовать для запуска моего запроса данных или другой стратегии для решения этой проблемы?

Ответы

Ответ 1

Если ссылка направляется на тот же маршрут только с другим параметром, он не перемонтируется, а вместо этого получает новые реквизиты. Таким образом, вы можете использовать функцию componentWillReceiveProps(newProps) и искать newProps.params.projectId.

Если вы пытаетесь загрузить данные, я бы рекомендовал получать данные до того, как маршрутизатор обработает совпадение, используя статические методы для компонента. Проверьте этот пример. Реагировать на Mega Demo Router. Таким образом, компонент будет загружать данные и автоматически обновляться при изменении параметров маршрута без необходимости полагаться на componentWillReceiveProps.

Ответ 2

Если вам понадобится перезагрузка компонента при изменении маршрута, вы можете передать уникальный ключ вашему атрибуту ключа компонента (ключ связан с вашим путем/маршрутом). Таким образом, каждый раз, когда маршрут изменяется, ключ также изменяет, какие триггеры реагируют на компонент для размонтирования/повторного подключения. Я получил идею этого ответа

Ответ 3

Вы должны быть ясны, что изменение маршрута не приведет к обновлению страницы, вы должны сами справиться с этим.

import theThingsYouNeed from './whereYouFindThem'

export default class Project extends React.Component {

    componentWillMount() {

        this.state = {
            id: this.props.router.params.id
        }

        // fire action to update redux project store
        this.props.dispatch(fetchProject(this.props.router.params.id))
    }

    componentDidUpdate(prevProps, prevState) {
         /**
         * this is the initial render
         * without a previous prop change
         */
        if(prevProps == undefined) {
            return false
        }

        /**
         * new Project in town ?
         */
        if (this.state.id != this.props.router.params.id) {
           this.props.dispatch(fetchProject(this.props.router.params.id))
           this.setState({id: this.props.router.params.id})
        }

    }

    render() { <Project .../> }
}

Ответ 4

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

Мне удалось найти исправление для этой ошибки:

https://github.com/ReactTraining/react-router/issues/1982#issuecomment-275346314

Короче (см. ссылку выше для полной информации)

<Router createElement={ (component, props) =>
{
  const { location } = props
  const key = `${location.pathname}${location.search}`
  props = { ...props, key }
  return React.createElement(component, props)
} }/>

Это позволит перемонтировать его при любом изменении URL