browserHistory 没有移动到 React 中的新组件

Question

我在 React 中遇到了这个奇怪的身份验证问题。

当用户登录时，authentication prop 设置为 true。如果用户尝试进入路由并且身份验证未定义或为假，那么我会将他们推回登录页面。

目前看起来是这样的：

PersonId 组件

  componentWillMount() {
    console.log("MOUNTING PERSON ID COMPONENT IF AUTHENTICATED IS TRUE", this.props.authenticated)
    if (!this.props.authenticated) {
        browserHistory.push("/login");     
      }
    }


 render() {    
    if(this.props.user.type == "Admin")

问题是，即使 this.props.authenticated = undefined，甚至当浏览器历史将组件推送到登录路由时，PersonId 组件的 render 方法仍在播放。

这没有意义。如果我将一个组件推送到另一条路线，为什么它仍然呈现 PersonId 组件？

Answer 1

componentWillMount() {
    console.log("MOUNTING PERSON ID COMPONENT IF AUTHENTICATED IS TRUE", this.props.authenticated)
    if (!this.props.authenticated) {
         browserHistory.push("/login");     
         return; 
    }
}

试试这个会有用的。组件仍将呈现，因为您没有中断 if 循环。

Answer 2

您使用的方式应该有效，您可以再做一件事，将相同的检查也放在 render 和 return null 中，它不会 render 任何东西，例如这个：

render() { 
      if (!this.props.authenticated) {
          return null;
      }
      ....
}

Answer 3

另一种选择是将所有私有组件包装在 HOC（高阶组件）中，如下所示：

  export default function CheckForAuth(Component) {
            return (
                class PrivateComponent extends React.component{
                    constructor() {
                        this.state = {
                            isAuthed: false
                        }
                    }
                    componentDidMount() {
                        //if user is authenticated set isAuthed to true
                    }

                    redner() {
                        let rednerThis;
                        if(this.state.isAuthed) {
                            rednerThis = <Component {...this.props} />
                        }
                        return (
                            <div>
                                {rednerThis}
                            </div>
                        )
                    }
                }
            )
    }

你这里有一个函数，它以一个 React 组件作为参数。然后它 returns 一个新创建的 class 有一个布尔值 on state 设置为 true 或 false 取决于你检查用户是否通过身份验证。如果 isAuthed，则呈现作为参数传入的组件，否则重定向到您的登录页面。

这将为您提供与您所追求的功能相同的功能，但带有仅用于检查用户身份验证一次的代码。与您当前的设置相反，每个组件都检查两次身份验证。一次在 willmount 中，一次在渲染中。

browserHistory 没有移动到 React 中的新组件

browserHistory not Moving to New Component in React

reactjs

authentication

components

browser-history