React Router 重新渲染路由而不是重新渲染组件答案

【问题标题】：React Router re-render route instead of re-render componentReact Router 重新渲染路由而不是重新渲染组件
【发布时间】：2017-12-10 21:22:45
【问题描述】：

我正在开发一个使用 React Router 的应用程序，我注意到当我的 Redux 存储更改状态时，路由器正在重新渲染当前路由引用的组件，而不是重新渲染路由本身。

为了说明问题；我已经实现了一个PrivateRoute 来检查用户当前是否已登录。在最基本的形式中，它看起来像这样：

const PrivateRoute = ({component: Component, ...rest}) => {
  return <Route {...rest} render={(props) => {
    const state = store.getState()

    if (state.isAuthenticated) {
      return <Component {...props}/>
    }
    else {
      return <Redirect to={{pathname: '/login'}}/
    }
  }}/>
})

这很好用，因为我现在可以这样说：

<PrivateRoute path="/" component={HomePage}/>

但是，我注意到当 isAuthenticated 的状态发生变化时，React Router 正在调用 render 组件上的 render 方法，而不是重新渲染路由。这意味着应用程序只会在用户从某个页面转到主页时进行身份验证检查，但一旦进入主页，则不再执行检查。

我目前唯一的解决方法是将身份验证检查移到组件的render 函数中（显然它不属于它的位置）。

如何让 React Router 重新渲染路由，而不是在状态改变时重新渲染路由引用的组件？

【问题讨论】：

您不能将PrivateRoute 连接到身份验证状态，而只能从存储变量中获取状态？我相信渲染树只是没有意识到基于某些状态变化的PrivateRoute 内部的变化
我不明白您评论的第一句话/问题。我怀疑 React Router 只调用一次路由的渲染方法（当路由路径被命中时）。之后它不会再在路由上调用render，而只会在路由返回的组件上调用render。我认为这是 React Router 中的一个问题。我正在寻找一个优雅的工作。
主要是我建议你在回答中实际做了什么，让道具传播:)

标签： javascript redux react-router

【解决方案1】：

我设法通过使用高阶组件而不是在路由中实施身份验证检查来解决问题。

function withEnsureAuthentication(WrappedComponent) {
  return class extends React.Component {
    render() {
      if (this.props.store.isAuthenticated === false) {
        return <Redirect to={{pathname: '/login'}}/>
      }

      return <WrappedComponent {...this.props}/>
    }
  }
}

您现在可以使用普通的Route，但将withEnsureAuthentication 应用于组件：

const HomePage = withEnsureAuthentication(Home)

<Route path="/home" component={HomePage}/>

【讨论】：