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

Webpack, babel and React Error message
- AJAX DataTables - Adding a condition in 'columns' (render) which returns a button (Link) of React-Router is not working - ReactJS -
How to correctly wrap Google Closure UI Component as Rum Component
DefinitelyTyped: Add new props typing for existing component
how to bind reactjs form submission action to spring controller
function return true after setTimeout (shouldComponentUpdate)
Children with the same key: Object.assign vs _.merge
Reactjs Router version4 Routing issue
Make the admin dashboard in the right way
React material-ui Stepper orientation Uncaught TypeError: Cannot read property 'props' of null
Inject a property programatically in react native
my component don't display
Combine react-boilerplate and SASS file
IconButton form material design not showing up in iOS
Component doesn't receive an event from socket.io
Webpack 2 extract text plugin entrypoints.length issues

Categories

HOME
marie
ftp
oracle-sqldeveloper
salesforce
mysqli
postsharp
conceptual
mingw
markdown
clip-path
ionic-native
software-collections
angularjs-ng-repeat
ethereum
gcloud
kairosdb
vichuploaderbundle
filehelpers
md2
scotty
udeploy
single-page-application
url-parameters
include-path
prepros
struts
chartist.js
jira-zephyr
grunt-contrib-uglify
pixels
formtastic
jbossfuse
apm
vtd-xml
andengine
jmsserializerbundle
slim-lang
cache-control
sdl-2
libconfig
origami
electron-packager
jquery-ui-slider
php-mongodb
firefox-developer-edition
text-extraction
codepen
ear
playframework-2.3
programming-pearls
nls
esprima
qt3d
huawei
lattice
addressbook
copy-constructor
blackberry-webworks
firebase-polymer
racket-student-languages
easy68k
indoor-positioning-system
bytearray
angularfire
pebble-js
jquery-draggable
gnu-sort
android-facebook
angular-promise
consul-template
vspackage
teamwork
opennebula
genome
mergecursor
screen-lock
strcpy
google-experiments
kss
apache-pivot
clearcanvas
parsefloat
im4java
serializer
isl
elixir-framework
carrier
php-amqplib
google-oauth-java-client
ia-32
qgraphicsscene
github-archive
bindinglist
stl-algorithm
cherokee
backlight
file-processing
qvariant
silverlight-2.0
qprocess
for-xml
uccapi
unauthorized

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App