ReactJs React路由器导航/显示和隐藏登录注销菜单

ReactJs React路由器导航/显示和隐藏登录注销菜单,reactjs,navigation,react-router,Reactjs,Navigation,React Router,我遇到了一些与路由器导航相关的问题。在我的导航中有两个菜单“登录”和“注册”。我的索引页是登录 在登录页面上输入emaild和password的值并提交登录按钮后,它将作为sessionValue输出。My sessionValue是用户名,它从服务器端返回,并重定向到TodoApp页面。登录后,它重定向到TodoApp页面。我想显示注销菜单,而不是在导航中登录 Myy代码如下: app.jsx ReactDOM.render( <Router history={brows

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

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

Myy代码如下:

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')
    );
问题:

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

  • 登录后显示注销菜单,单击注销菜单时显示登录菜单


  • 希望回答此问题的用户可能希望先检查是否已回答。
         var Nav= React.createClass({
            render:function(){
                var strUserName = localStorage.getItem('sessionValue');
                console.log(strUserName);
            function loginMenu(){
                    if(strUserName){
    
                                    return <Link to="/RegistrationForm" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Logout</Link> 
    
                }
                else{
                    return <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>LogIn</IndexLink> 
    
                }
            }
                return(
                    <div className="top-bar">
                            <div className="top-bar-left">
                                <ul className="menu">
                                <li className="menu-text">
                                    React App
                                </li>
                                <li>
                                    {loginMenu()}
                                </li>
                                <li>
                                        <Link to="/RegistrationForm" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Signup</Link>
                                </li>
    
                                </ul>
                            </div>
                            </div>
                    );
            }
            });
     module.exports=Nav;
    
    if(validForm){
            axios.post('/login', {
            email:this.state.strEmail,
            password:this.state.strPassword
            })
            .then(function (response) {
            //console.log(response.data);
            var sessionValue=response.data;
    //After login todoApp page is open and with session value.session value passed through url to todoApp.
            browserHistory.push(`todoapp/${sessionValue}`);
            localStorage.setItem('sessionValue',sessionValue);
     })
            .catch(function (error) {
            console.log(error);
            });
        }
    },