Question

我正在使用使用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组件上的HomePage方法，而不是重新呈现路由。这意味着应用程序仅在用户从某个页面转到主页时才进行身份验证检查，但是一旦在主页上，则不再执行检查。

我目前唯一的工作就是将身份验证检查移到组件的render功能中（显然不是它所属的位置）。

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

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

React Router重新渲染路径而不是重新渲染组件

1 个答案: