ReactJs React-Router Navigation/show and hide logi

2019-07-17 07:00发布

问题:

I am stuck with some issue related to react-router Navigation. In my navigation there are 2 menu login and register. and my index page is login.

On login page after entered the value of emaild and password and submitting login button it get output as sessionValue. My sessionValue is username which return from serverSide and it redirect to TodoApp page. After login it redirected to TodoApp page.I want to display logout menu instead of login in navigation.

Myy code is as below:

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')
    );

Navigation component

I tried this by using localstorage but it doesn't work. It works only I clicked on backward arrow of browser.

     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;

login page (login.jsx)

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);
        });
    }
}, 

Questions:

  1. how to show/hide login/logout menu.

  2. after login show logout menu and when we click on logout menu show login menu