reactjs
ReactJs React-Router Navigation/show and hide login logout menu
I am stuck with some issue related to react-router Navigation.Please help me out with this problem. 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: 1.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') ); 2.Navigation component I tried this by using localstorage but it doesn't work.It works only when 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; 3.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); }); } }, Question: 1.how to show/hide login/logout menu. 2.after login show logout menu and when we click on logout menu show login menu Looking forward for your suggestions and comment. Its quite urgent. your suggestion will be highly appreciated.
I am also having same problem. any one have the solution...
Related Links
Set default activeClassName for NavLink in React Router v4
Reactjs combine all the states to parent component
How to pass a function down the component's hierarchy without using props in React?
Meteor React createContainer rerender
Idiomatic way to chain redux state changes?
How to select unknown element in react native webview?
How to split props string in React?
TypeScript: Export React components as part of a namespace
How to find out what is initiating an (re)render in React
Get API response to a function and populate controls
Manage conflict between componentwillrecieveprops and onChange function
React-Dates in component using Redux
react-router - cannot GET url
Child components not updating in Safari. Works like a charm in Chrome and FF
react webpack app often got a blanc page after reload
Starting React app from scratch