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

Saga doesn't end when canceled
How to force update data cache in react-apollo?
How to make fixed-data-table React fixed columns to both left and right side?
Sharepoint:Thread was being aborted Exception web service
redux-form unable to type values in fields
React Router v3 per flow bundle splitting
progressive web app site cannot be installed: no icon available to display
react doesn't render components with changes even when state changes
Should form tags be used in React if I am just calling a function on submit?
Debugging “react-redux” application?
Diagnosing RangeError: Maximum call stack size exceeded in React KeyEscapeUtils
Update state by changing an entire object within state array
browserHistory not Moving to New Component in React
Reactjs modal height change
Can I bundle react.js apps into multiple modules?
Match multiple path with react router v4

Categories

HOME
internet-explorer
swift3
optimization
redux
stanford-nlp
alasql
latex
readdir
skypedeveloper
gaussian
data-modeling
grid
perl6
richtextbox
procmon
liquidsoap
open-search-server
rmarkdown
android-webview
ejb-3.0
aws-sdk-cpp
guidewire
jetbrains
box2d
web-testing
powerpivot
android-actionbar
ampscript
openoffice-basic
gomobile
formulas
typedef
windowserror
tftp
scripting-language
sphinx4
edsdk
overflow
offset
azure-vm-scale-set
repeat
rythm
strategy-pattern
lex
latency
armadillo
delphi-xe
android-graphview
quartz
mtm
libzip
weld
cancan
e4
fluent-nhibernate-mapping
selection-sort
critical-section
toggleclass
mongodb-3.3
access-violation
sprockets
android-xmlpullparser
django-taggit
python-rq
jmh
bbedit
cexception
stdlist
sqldataadapter
computability
magnet-uri
play-json
eula
pymol
dockerpy
caption
aiff
launcher
system.io.packaging
os.walk
famous-engine
formbuilder
lettuce
image-preloader
new-operator
dayofweek
node-mongodb-native
android-jack-and-jill
codio
xcode6.1-gm-seed
surfaceview
xcode5.1
myrrix
raddatepicker
objectdatasource
azure-pack
architectural-patterns
idoc
volatility
mvcmailer
youtube.net-api
moss2007-security
javah
cinder
rollover
subdirectories
mysql-pconnect
focus-stealing
managed-code
cons

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