时间戳

首页 > 解决方案 > 在react.js中登录和注销时重新渲染链接

reactjs - 在react.js中登录和注销时重新渲染链接

问题描述

当我登录时！在我刷新组件之前，主页、注销和其他链接不可见。in url 重定向正常工作，但登录和相同注销后未显示注销链接。如果需要更多解释，请告诉我[在此处输入图片描述][1]

[1]：https ://i.stack.imgur.com/ WHljf.png`这是图像，因此您可以看到我登录的主页，但链接主页、注销等不可见。刷新控制台时显示链接

class TodoApp extends Component {
render() {
    return (
        <div id="div1" className='TodoApp'>
            <Router>
                <HeaderComponent />
                <Switch>
                    <Route path="/" exact component={LoginComponent} />
                    <Route path="/login" component={LoginComponent} />
                    <AuthenticatedRoute path="/welcome/:name" component={WelcomComponent} />
                    <AuthenticatedRoute path="/todo" component={TodoComponent} />
                    <AuthenticatedRoute path="/logout" component={LogoutComponent} />
                    <Route component={ErrorComponent} />
                </Switch>
                <FooterComponent />
            </Router>

        </div>
    )
}

}

class HeaderComponent extends Component {
render() {

    return (
        <header>
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <div><a href="http://www.google.com" className="navbar-brand">Rahul</a></div>
                <ul className="navbar-nav">
                    {ApplicationServer.isUserLoggedIn() && <li><Link to="/welcome/Rahul">Home</Link></li>}
                    {ApplicationServer.isUserLoggedIn() && <li><Link to="/todo">Todos</Link></li>}
                </ul>
                <ul className="navbar-nav navbar-collapse justify-content-end">
                    {!ApplicationServer.isUserLoggedIn() && <li><Link  to="/login">Login</Link></li>}
                    {ApplicationServer.isUserLoggedIn() && <li><Link  to="/logout" onClick={ApplicationServer.logout}>LogOut</Link></li>}
                </ul>
            </nav>
        </header>


    )
}

}

标签： reactjs

解决方案

我的猜测是 isUserLoggedIn() 在组件加载时被调用一次，因为它不知道更新。您可以创建一个帮助函数，当用户单击登录/注销时调用该函数。它将检查 ApplicationServer.isUserLoggedIn() 并将结果设置为 isLoggedIn 状态。这样你就可以isLoggedIn && <li>在你的代码中使用，当状态改变时，组件会自动更新并重新渲染

推荐阅读