Question

我正在React中创建高阶组件，并确保用户无法访问受保护的路由。一切正常，但是我不确定将代码用于检查redux状态。当前，在下面的代码中，我已将所有代码放置在componentDidMount中。这是因为componentWillMount已弃用。这是检查的最佳位置，因为在安装组件后会触发componentDidMount。

import React, { Component } from 'react';
import { connect } from 'react-redux'

export default function(ComposedComponent) {

  class Authenticate extends Component {

    componentDidMount() {

      if(!this.props.isAuthenticated) {
        this.props.history.push('/')
      }

    }

    render() {
      return (
        <ComposedComponent {...this.props} />
      )
    }
  }

const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.isAuthenticated
  }
}


return connect(mapStateToProps)(Authenticate)

}

Answer 1

假设在构造时可以使用正确的状态，则可以在构造函数中进行重定向：

class Authenticate extends Component {
   constructor(props) {
      super(props);
      if(!props.isAuthenticated) {
         props.history.push('/')
      }
   }
...
}

Answer 2

这是React Router Redirect组件的目的：

render() {
  return !this.props.isAuthenticated ? (
    <Redirect to="/" />
  ) : (
    <ComposedComponent {...this.props} />
  )
}

高阶组件和验证路线

2 个答案: