Reactjs React路由器导航

我遇到了一些与路由器导航相关的问题。在我的导航有2个菜单登录和注册，我的索引页是登录

在登录页面上，输入emaild和password的值并提交登录按钮后，它将输出为sessionValue。我的sessionValue是username，它从服务器端返回，并重定向到TodoApp页面。登录后，它重定向到TodoApp页面。我想显示注销菜单，而不是在导航中登录

我的代码如下：

app.jsx

    ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
        <Route path="RegistrationForm" component={RegistrationForm}/>
        <Route path="todoapp/:sessionValue"component={TodoApp}/>
        <IndexRoute component={Login}/>
    </Route>
  </Router>, 
  document.getElementById('app')
);

问题:

如何显示/隐藏登录/注销菜单

登录后显示注销菜单，单击注销菜单时显示登录菜单

---

您应该在幕后有一些状态管理策略来实现此行为。因此，您可以拥有以下组件结构

App
- Nav
- LoginForm

没有redux/mobX这样的状态管理库，您需要在应用程序组件中定义状态

class App extends Component {
  constructor(props) {
    super(props);
    this.onLoggedInChanged = this.onLoggedInChanged.bind(this);
    this.state = {
      isLoggedIn: false
    }
  }
  onLoggedInChanged(isLoggedIn) {
    this.setState({
      isLoggedIn: isLoggedIn
    });
  }
  render() {
    return (
      <Nav isLoggedIn={this.state.isLoggedIn} />
      <LoginForm onLoggedInChanged={this.onLoggedInChanged}></LoginForm>
    );
  }
}

您可以在他们的文档中找到有关react应用程序状态的更多信息

---

在redux/mobx中，它将以不同的方式完成。

您使用什么来管理状态？您的任何代码段都没有显示任何状态管理。您可能希望将本地存储内容加载到

组件Willmount

生命周期回调中的状态。我的会话值来自登录组件中handleSubmit函数的回调函数中的服务器端。我尝试将值存储在本地存储中。我在导航组件中也得到了这个值。当我点击登录（提交）按钮时，它不工作。但当我刷新我的页面或转到后退页面时，就会出现注销菜单。因为重新呈现后，值会进入本地存储。你能帮帮我吗？我被它卡住了。可能是它的复制品

App
- Nav
- LoginForm

class App extends Component {
  constructor(props) {
    super(props);
    this.onLoggedInChanged = this.onLoggedInChanged.bind(this);
    this.state = {
      isLoggedIn: false
    }
  }
  onLoggedInChanged(isLoggedIn) {
    this.setState({
      isLoggedIn: isLoggedIn
    });
  }
  render() {
    return (
      <Nav isLoggedIn={this.state.isLoggedIn} />
      <LoginForm onLoggedInChanged={this.onLoggedInChanged}></LoginForm>
    );
  }
}

Nav = () => {
  let loginElement = this.props.isLoggedIn ? 'Logged in user' : 'Not logged in'
  return (<div>{loginElement }</div>)
}