Javascript 如何在登录后从导航栏中删除登录按钮

我正在构建一个有3个不同页面（主页、登录和用户）的网站，我正在使用React路由器中的交换机组件在页面之间移动。 我遇到的问题是，当我进入用户页面时，我仍然会在导航列表中看到登录名，如下图所示 现在，我希望登录按钮被删除，一旦我进入用户页面或切换到“注销”文本。你对如何做到这一点有什么建议吗。我还包括了代码，所以它更清晰

标题（导航栏）组件

import React from "react";
import { Link } from "react-router-dom";
import './App.css';

const Header = () => (
  <header >
    <nav className='topnav'>
      <ul>
          <li>
            <Link to="/Login">Login</Link>
          </li>
          <li>
            <Link to="/">Home</Link>
          </li>

      </ul>
    </nav>
  </header>
);

export default Header;

const Login = () => (

  <Switch>
    <div className="LoginWrap">
      <Route exact path="/Login" component={LoginForm} />
      <Route path="/Login/:number" component={User} />
    </div>
  </Switch>

);

export default Login;

---

，它总是显示“注销”

基本上惯例是使用身份验证上下文来管理状态，或者您也可以将身份验证方法放在上下文中。我只是快速搜索了一下这个示例，找到了一个干净的示例。

最好的基本方法之一是在用户登录时设置localStorage值，并在用户注销时删除该值。大概是这样的：

const auth=localStorage.getItem（“islogin”）；
if（islogin）{//如果有一个名为islogin的值。。。
注销
}否则{
登录
}

如果您想使用Redux解决您的问题，可以在我的github存储库（）中查看我的简单Redux示例，它将能够详细解释一切

您只需更改应用程序的index.js和Counter.js（在您的案例中登录）文件：

Index.js

---

我试着按照你的建议做，并根据你的建议更新了我的答案。但它基本上不起作用，尽管它显然应该起作用。我建议您使用State而不是localStorage来管理auth。@Devang您的意思是使用全局State和Redux之类的工具？当我删除

===true

时，您知道为什么有时会显示Login，有时会显示Logout吗？不需要使用Redux。只要在登录成功时更新状态即可。

<Link to="/Login">
{
  console.log("Header localStorage.getItem isLoggedIn is :" + localStorage.getItem("isLoggedIn"))
}
{
  localStorage.getItem("isLoggedIn") === true? "Logout" : "Login"
}
</Link>

localStorage.getItem("isLoggedIn") ? "Logout" : "Login"

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore } from "redux";

const initialState = {
  isLoggedIn: false
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        isLoggedIn: true
      };
    case "LOGOUT":
      return {
        isLoggedIn: false
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

import React from "react";
import { connect } from "react-redux";

class Login extends React.Component {
    login = () => {
        this.props.dispatch({ type: "LOGIN" });
    };
    logout = () => {
        this.props.dispatch({ type: "LOGOUT" });
    };

    handleLoginClick=()=>
    {
      if (this.props.isLoggedIn === true){  
        this.logout()
      }
      else{
        this.login()
      }
    }  
    
    render(){...}
}

function mapStateToProps(state) {
    return {
        isLoggedIn: state.isLoggedIn
    };
}

export default connect(mapStateToProps)(Login);