маршрутизатор изменен, но компонент не перерисовывается

Question

Я использую React-Router v4 и Redux.У меня есть событие реакции-маршрутизатора, подобное

//src/App/components/common/Notifications
onCommentClick = (id) => {
    this.props.history.push(`/dashboard/${id}`)
}

Это изменит URL-адрес браузера, мой маршрут настроен правильно, я думаю,

//src/App/containers/dashboard/user/NotificationDetail
renderUserRoute() {
    return (
      <Switch>
        <Route exact path="/dashboard" component={UserAreaGuarded} />
        <Route exact path="/dashboard/:id" component={NotificationDetail} />
      </Switch>
    )
  }

, но проблема в том, что избыточность не кажетсяЧтобы повторно обработать мой контейнерный компонент, мне нужно обновить его, чтобы получить правильный контент.

Я создал репозиторий просто для демонстрации этой проблемы https://github.com/thian4/hoc-redux, застрял так долго, не мог найти ни одногоПонять, почему он не воспроизводится.

Answer 1

Проблема была не с маршрутизатором, компонент NotificationDetail вызывает fetchNotification только в componentDidMount. Поскольку вы визуализируете компоненты маршрута с помощью Route component prop , компонент маршрута NotificationDetail монтируется только один раз, а затем просто обновляется при каждом повторном рендеринге.

Есть два способа исправить это ...

1. В NotificationDetail введите fetchNotification в componentDidUpdate вместо componentdidMount, просто переименуйте метод. Этот подход лучше.

2. Используйте компонент без состояния в качестве значения component prop в dashboard\index.js:

   renderUserRoute() {
     return (
       <Switch>
         <Route exact path="/dashboard" component={UserAreaGuarded} />
         <Route exact 
             path="/dashboard/:id" 
             component={props => <NotificationDetail {...props} />} />
       </Switch>
     )
   }
   

   Это заставит React-Router отображать новый компонент маршрута при каждом изменении маршрута. Очевидно, что это имеет проблемы с производительностью по сравнению с # 1.

Вне зависимости от этого, пожалуйста, добавьте key={i} в этой строке в Notification.js, чтобы исправить ужасное предупреждение Each child in an array or iterator should have a unique "key" prop..

Надеюсь, это поможет.