Question

我正在使用react-router v4和redux。我有一个类似的React-Router事件

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

它将更改浏览器的网址，我想我的路由设置正确

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

但是问题是redux似乎没有重新渲染我的容器组件，我需要刷新以获取正确的内容。

我创建了一个仅用于演示此问题https://github.com/thian4/hoc-redux的存储库，已经为此停留了很长时间，找不到任何线索，说明它为什么不重新呈现。

Answer 1

问题不在于路由器，NotificationDetail组件仅在componentDidMount中调用fetchNotification。在您rendering the route components with the Route component prop的情况下，NotificationDetail路由组件仅安装一次，然后仅在每次重新渲染时进行更新。

有两种方法可以解决此问题...

在NotificationDetail中，在fetchNotification中执行componentDidUpdate而不是componentdidMount，只需重命名方法即可。这种方法更好。

使用无状态组件作为component中dashboard\index.js prop的值：

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

这将使React-Router每次更改路线时都会渲染一个新的路线组件。显然，这存在超过＃1的性能问题。

与此无关，请在key={i}的{{3}}上添加Notification.js，以解决可怕的Each child in an array or iterator should have a unique "key" prop.警告。

希望这会有所帮助。

路由器已更改，但组件未重新呈现

1 个答案: