reactjs - 登录时正确渲染组件

问题描述

我正在使用React，并且我制作了一个导航栏，当您登录时它应该会更改内容。

例如，您拥有home register login并且一旦您登录，您就拥有home logout.

问题是在您成功登录后重定向后导航栏第一次没有改变，我不明白为什么。

登录页面：

export default class Login extends React.Component {
    render() {
        if (localStorage.getItem("jwt-token")) {
            return (
                <Redirect to = "/home" />
            );
        }
        return (
            <div id="main">
                <NavBar />
                <div id="body">
                    Login
                    <LoginForm />
                </div>
                <Footer />
            </div>
        );
    }
}

这是在 LogginForm

   render() {
       if (this.state.isLogged === true) {
           return (
               <Redirect to = {{ pathname: "/home" }} />
           );
       }
       ... //rest of the form when you're not logged in.
   }

和主页：

export default class Home extends React.Component {
    render() {
        return (
            <div id="main">
                <NavBar />
                <div id="body">
                    Home
                </div>
                <Footer />
            </div>
        );
    }
}

这是我的导航栏组件：

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogged: undefined,
            login: "",
        }
    }

    async componentWillMount() {
        let token = localStorage.getItem("jwt-token");
        console.log(token);
        if (token) {
            let decodedToken = jwt.decode(token, "secretKey");
            this.setState({
                isLogged: true,
                login: decodedToken.userInfo.login,
            });
        }
    }

    render() {
        if (this.state.isLogged === true) {
            return (
                <div>
                    <ul>
                        <li><Link to="/home">Home</Link></li>
                        <li><Link to="/logout">Logout</Link> [{this.state.login}]</li>
                    </ul>
                </div>
            );
        }
        return (
            <div>
                <ul>
                    <li><Link to="/home">Home</Link></li>
                    <li><Link to="/register">Register</Link></li>
                    <li><Link to="/login">Login</Link></li>
                </ul>
            </div>
        );
    }
}

P/s： 很简单，我只是想了解它是如何工作的。

因此，正如我第一次重定向到主页时所说，我的导航栏就像我没有经过身份验证但我是。当我刷新页面时，我的导航栏最终看起来就像我通过了身份验证一样。

我的问题是：为什么我需要重新加载页面？

感谢帮助。

标签： reactjs

reactjs - 登录时正确渲染组件

问题描述

解决方案

推荐阅读