Question

我正在尝试使用react构建一个Web应用程序，但我碰壁了。

问题是，我不希望任何已经登录的用户访问登录页面。

我尝试使用render方法和componentDidMount方法重定向它们，但是由于render方法在componentDidMount之前调用，因此登录页面在重定向之前会闪烁。

这些是我的代码。

我正在使用redux和firebase来控制组件状态并进行身份验证。

class CenterPanel extends Component {
    render() {
        const { user }=this.props;

        if(user!=null) { //this is how I tried to redirect
            return ( //
                <Redirect to='/somewhereNotHere' />
            );
        }

        return ( //this flashes out before redirection
            <div className={cx('center_panel')}>
                <div className={cx('button')}>
                    login
                </div>
            </div>
        );
    }

    componentDidMount() {
        const { changeUserStatus }=this.props;

        firebase.auth().onAuthStateChanged(
            (user) => changeUserStatus(user)
        );
    }
}

将感谢任何形式的建议。提前谢谢。

Answer 1

也许在呼叫user之前道具onAuthStateChanged是不确定的

如果正确，则可以通过三个user值来控制组件。未定义，空，用户值。

render() {
        const { user }=this.props;

        if(user === undefined){
            return null; //or Loading component
        }

        if(user!=null) { //this is how I tried to redirect
            return ( //
                <Redirect to='/somewhereNotHere' />
            );
        }

        return ( //this flashes out before redirection
            <div className={cx('center_panel')}>
                <div className={cx('button')}>
                    login
                </div>
            </div>
        );
    }

Answer 2

您应该尝试一下

if(user && user!==null) { //this is how I tried to redirect
     return <Redirect to='/somewhereNotHere' />  //Make sure you have imported Redirect from correct package i.e. react-router-dom
}else{
     return ( //this flashes out before redirection
            <div className={cx('center_panel')}>
                <div className={cx('button')}>
                    login
                </div>
            </div>
     );
}

Another way 本身就是Routes，

<Route exact path="/your_Path_to_component" render={() => (
  user ? ( //get the user data as you are passing as props to CenterPanel component
    <Redirect to="/somewhereNotHere"/>
  ) : (
    <CenterPanel />
  )
)}/>

通过这种方式，无需将user作为props传递给CenterPanel组件，也不需要在CenterPanel组件中编写任何重定向逻辑。

渲染前如何重定向？

2 个答案: