Как передать реквизит на маршрут, не заставляя компонент монтироваться дважды?

Question

Я пытаюсь передать реквизиты своим компонентам из различных источников, таких как этот комментарий

Это мой текущий код

<Router>
  ...
  <Route path="/:id" exact component={() => <GymMain id={params.id} appointmentTypes={appointmentTypeList} />} />
  <Route path={`/:id/:name`} component={(props) => {
    const { params } = props.match;
    const aType = appointmentTypeList.find(at => at.uri === params.name);
    return <AppointmentType id={params.id} appointmentType={aType} />
  }} />
  ...
</Router>

Однако этоприводит к тому, что компоненты монтируются дважды: один раз, когда вы переходите в него, а затем, когда вы уходите от него (при переходе в сторону, пропускаются старые реквизиты).Это происходит потому, что я украшаю свой оригинальный компонент анонимным, как описано в этом ответе .

Мой вопрос заключается в том, как подготовить реквизиты для дочерних компонентов на основе параметров маршрута изатем передайте его перенаправленному компоненту.Спасибо!

Answer 1

Существует небольшая разница между использованием component prop против render prop для рендеринга функционального компонента.

Согласно документам :

Когда вы используете component (вместо render или children, ниже), маршрутизатор использует React.createElement для создания нового элемента React из данный компонент. Это означает, что если вы предоставляете встроенную функцию для пропеллер компонента, вы будете создавать новый компонент каждый рендер. Это приводит к размонтированию существующего компонента и монтированию нового компонента вместо простого обновления существующего компонента . При использовании встроенной функции для встроенного рендеринга используйте рендер или опора детей (внизу).

Следовательно, вы видите вышеуказанное поведение в вашем случае. Измените свой код, чтобы использовать render prop, и он будет работать нормально

<Router>
  ...
  <Route path="/:id" exact render={() => <GymMain id={params.id} appointmentTypes={appointmentTypeList} />} />
  <Route path={`/:id/:name`} render={(props) => {
    const { params } = props.match;
    const aType = appointmentTypeList.find(at => at.uri === params.name);
    return <AppointmentType id={params.id} appointmentType={aType} />
  }} />
  ...
</Router>

Answer 2

Это не лучший способ сделать это. Вы можете использовать метод UNSAFE_componentWillUpdate() lifecylcle для проверки входящих реквизитов.

UNSAFE_componentWillUpdate(nextProps, nextState){
// check for your condition for updating component
 if (this.porps !== nextProps) { 
   this.forceUpdate()
}
 else {
    return
   }
}