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

intercept ReactJS synthetic keydown handler
Browserify fails to create bundle with babelify transform (TypeError: Path must be a string.)
Accessing React component's static methods inside propTypes is not allowed
Flux/utils: How to access to props in the calculateState method?
What is the correct way to implement a stateless authentication?
Only animate list items when new are inserted, not when mounting initial
React as webpack external dependency
Karma + Browserify + Jasmine + Istanbul + React coverage
react boilerplate / generator with gulp, browserify, babel, etc?
Optimizing React Rendering with Function Partial Application
How to pass store explicitly into as a prop to “Connect()”
How can I use HTML5 Validation with React?
react testing: shallow rendering - getRenderOutput returning null
Async loaded config data for reactjs
Why is my context.router undefined in my react component?
EventKeys in NavDropdown in React-Bootstrap

Categories

HOME
classification
autohotkey
model-view-controller
swift3
ftp
locale
jenkins-pipeline
formatting
display
phantomjs
readdir
localhost
clip-path
software-collections
angularjs-ng-repeat
olap
oms
websharper
minimum
bookmarklet
openscad
amazon-data-pipeline
printf
aws-devicefarm
opengraph
ecmascript-2017
poisson
knapsack-problem
pydub
tftp
resx
jms-topic
ipython-parallel
concrete5
boost-log
textview
favorites
rtos
certbot
ansible-inventory
azure-vm-scale-set
lighting
iterm2
scalamock
aura-framework
superclass
anonymous-function
spring-data-commons
monaca
cloudconvert
activesupport
zsh-completion
x12
rowname
nd4j
ideavim
imageicon
attiny
optimistic-locking
quickfixn
system.io.packaging
sat4j
switchpreference
telerik-appbuilder
traceur
cvi
starling-framework
vbaccelerator
nop
maven-javadoc-plugin
ie-developer-tools
aspnet-compiler
leap-year
nx
yii-components
motorola-droid
nsundomanager
copyfile
umfpack
rjs
openwrap
overlays
mismatch
nbehave
web-search

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App