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

Question

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

myapplication.com/project/unique-project-id 

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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 изменение

Answer 4

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

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 .../> } 
}