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

Categories

HOME
msbuild
model-view-controller
azure-active-directory
network-programming
file-upload
arguments
css-selectors
symfony-3.2
liquidsoap
jquery-select2
box-api
runtime
jetbrains
expo
logstash-configuration
k-means
powerpivot
audio-streaming
ampscript
waterfall
aws-certificate-manager
windows-mobile
pydub
ballerinalang
gulp-jshint
cloudformation
hierarchy
ports
rtos
restler
n1ql
machine-code
mybatis-generator
ngrok
azure-web-roles
apiman
pexpect
api-key
amazon-fire-tv
jscoverage
apache-commons-cli
gevent
optional-parameters
deck.js
jigsaw
falcon
boost-bind
jmh
abstract
alchemy
std
log4cxx
teamwork
stderr
system.diagnostics
radgrid
beagleboard
chunks
crtdbg.h
kss
jsonschema2pojo
conditional-comments
disparity-mapping
time-frequency
pyalgotrade
hotlinking
git-subtree
grunt-contrib-imagemin
8-puzzle
fade
uikit-dynamics
junit-rule
inflate
systrace
django-admin-tools
idtabs
joomla1.7
fileoutputstream
lwp
azure-appfabric
mediastreamsource
datadude
time-management
j++
scalable

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile