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

Я працюю над додатком для реагування, використовуючи response-router. У мене є сторінка проекту, яка має URL-адресу наступним чином:

myapplication.com/project/unique-project-id

Коли компонент проекту завантажується, я запускаю запит даних для цього проекту з події componentDidMount. Зараз я зіткнувся з проблемою, коли, якщо я переключаюсь безпосередньо між двома проектами, так змінюється лише ідентифікатор ...

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

componentDidMount не запускається знову, тому дані не оновлюються. Чи є інша подія життєвого циклу, яку я мав би використовувати для ініціювання запиту даних, або інша стратегія вирішення цієї проблеми?

Якщо посилання спрямовує на той самий маршрут із іншим параметром, це не перемонтування, а натомість отримання нового реквізиту. Отже, ви можете скористатися componentWillReceiveProps(newProps)функцією і шукати newProps.params.projectId.

Якщо ви намагаєтеся завантажити дані, я б рекомендував отримати дані, перш ніж маршрутизатор обробляє відповідність, використовуючи статичні методи на компоненті. Перегляньте цей приклад. Мега-демонстрація React Router . Таким чином, компонент завантажує дані та автоматично оновлюється, коли змінюються параметри маршруту, не потребуючи при цьому сподіватися componentWillReceiveProps.

Якщо вам потрібно перемонтувати компонент при зміні маршруту, ви можете передати унікальний ключ атрибуту ключа компонента (ключ пов'язаний з вашим шляхом / маршрутом). Отже, кожного разу, коли змінюється маршрут, ключ також змінюватиметься, що запускає компонент React для демонтажу / повторної монтажу. Я отримав ідею з цієї відповіді

Ось моя відповідь, подібна до наведеної вище, але з кодом.

<Route path="/page/:pageid" render={(props) => (
  <Page key={props.match.params.pageid} {...props} />)
} />

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

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

Якщо у вас є:

<Route
   render={(props) => <Component {...props} />}
   path="/project/:projectId/"
/>

У React 16.8 і вище за допомогою гачків ви можете зробити:

import React, { useEffect } from "react";
const Component = (props) => {
  useEffect(() => {
    props.fetchResource();
  }, [props.match.params.projectId]);

  return (<div>Layout</div>);
}
export default Component;

Там ви лише ініціюєте новий fetchResourceдзвінок, коли це props.match.params.idзмінюється.

На основі відповідей @wei, @ Breakpoint25 та @PaulusLimma я зробив цей замінний компонент для <Route>. Це перемонтує сторінку при зміні URL-адреси, змушуючи всі компоненти на сторінці створюватись і монтуватись знову, а не просто повторно відображатись. Усі componentDidMount()та всі інші хуки запуску виконуються також при зміні URL-адреси.

Ідея полягає в тому, щоб змінити keyвластивість компонентів при зміні URL-адреси, і це змушує React повторно змонтувати компонент.

Ви можете використовувати його як випадаючу заміну <Route>, наприклад, наприклад:

<Router>
  <Switch>
    <RemountingRoute path="/item/:id" exact={true} component={ItemPage} />
    <RemountingRoute path="/stuff/:id" exact={true} component={StuffPage} />
  </Switch>
</Router>

<RemountingRoute>Компонент визначається наступним чином:

export const RemountingRoute = (props) => {
  const {component, ...other} = props
  const Component = component
  return (
    <Route {...other} render={p => <Component key={p.location.pathname + p.location.search}
                                              history={p.history}
                                              location={p.location}
                                              match={p.match} />}
    />)
}

RemountingRoute.propsType = {
  component: PropTypes.object.isRequired
}

Це перевірено на React-Router 4.3.

Відповідь @ wei чудово працює, але в деяких ситуаціях я вважаю, що краще не встановлювати ключ внутрішнього компонента, а сам маршрут. Крім того, якщо шлях до компонента є статичним, але ви просто хочете, щоб компонент перемонтувався кожного разу, коли користувач переходить до нього (можливо, щоб здійснити виклик api за допомогою componentDidMount ()), зручно встановити location.pathname на ключ маршруту. З ним маршрут і весь його вміст переробляється при зміні місцезнаходження.

const MainContent = ({location}) => (
    <Switch>
        <Route exact path='/projects' component={Tasks} key={location.pathname}/>
        <Route exact path='/tasks' component={Projects} key={location.pathname}/>
    </Switch>
);

export default withRouter(MainContent)

Ось як я вирішив проблему:

Цей метод отримує окремий елемент з API:

loadConstruction( id ) {
    axios.get('/construction/' + id)
      .then( construction => {
        this.setState({ construction: construction.data })
      })
      .catch( error => {
        console.log('error: ', error);
      })
  }

Я викликаю цей метод з componentDidMount, цей метод буде викликаний лише один раз, коли я завантажую цей маршрут вперше:

componentDidMount() {   
    const id = this.props.match.params.id;
    this.loadConstruction( id )
  }

І з componentWillReceiveProps, який буде викликаний з другого разу, коли ми завантажуємо той самий маршрут, але інший ідентифікатор, і я викликаю перший метод для перезавантаження стану, а потім компонент завантажує новий елемент.

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.id !== this.props.match.params.id) {
      const id = nextProps.match.params.id
      this.loadConstruction( id );
    }
  }

Якщо ви використовуєте Class Component, ви можете використовувати componentDidUpdate

componentDidMount() {
    const { projectId } = this.props.match.params
    this.GetProject(id); // Get the project when Component gets Mounted
 }

componentDidUpdate(prevProps, prevState) {
    const { projectId } = this.props.match.params

    if (prevState.projetct) { //Ensuring This is not the first call to the server
      if(projectId !== prevProps.match.params.projectId ) {
        this.GetProject(projectId); // Get the new Project when project id Change on Url
      }
    }
 }

Ви можете скористатися наведеним методом:

useEffect(() => {
  // fetch something
}, [props.match.params.id])

коли компонент гарантовано відтворюється після зміни маршруту, тоді ви можете передавати реквізит як залежність

Не найкращий спосіб, але достатньо хороший, щоб впоратися з тим, що ви шукаєте, згідно з Кентом Доддсом : Подумайте більше про те, що ви хочете, щоб сталося.

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-адреси