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

When initialize action trigger?
How to render nested array elements in React?
creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
Election: Passing Session Cookie to Front end (Backend Functional)
React - Trigger an Action on Stateless Component Mount
I cannot fix Uncaught TypeError: Super expression must either be null or a function, not undefined?
admin-on-rest: implement a login page with a link to a registration page
React cloneElement unknown prop warning
Is it possible to make an editable select in blueprintjs?
How do I add parameters to this event on the Pagination at antd?
Webpack Hot Module Reloading not working
By clicking text how to change clicked text to another text in react.js
How do I configure Flow in a newly created React JS app?
React Redux one-page app: handle an API 404 with full page render
Render React into Shadow Root
Accessing this.props.location.pathname within the Route component

Categories

HOME
asterisk
openacc
mysqli
azure-eventhub
windows-server-2008
conceptual
cryengine
crm
nltk
salesforce-lightning
hiveql
richtextbox
comments
collision-detection
zabbix
google-api-oauth
tracking
appsettings
web-worker
multibinding
smooth-scrolling
web-parts
windows-phone
draw2d
accordion
git-branch
javaagents
opengraph
chartist.js
ckeditor4.x
android-xml
deployment-descriptor
mongoose-im
adobe-captivate
git-submodules
federated
2checkout
deferred
ibm-bpm
jcr
favorites
android-scrollview
fastadapter
tunnel
client-server
mongoid5
sknode
jquery-ui-slider
intervention
html-entities
chrome-custom-tabs
opos
nao-robot
runtime-permissions
sharpssh
jtextarea
rmq
lightspeed
google-scholar
portaudio
jspx
patching
nimbus
usps
ideavim
wizard
dcast
nonblocking
recode
webservices-client
transbase
roslyn-code-analysis
syncano
eaaccessory
parseexception
veeam
beagleboard
data-quality-services
shunting-yard
pysvn
unityvs
illegalargumentexception
qf-test
clearcanvas
nsurlrequest
nsnotificationcenter
nest-initiative
parallel-port
rpt
sigma-grid-control
azure-caching
email-headers
db2-connect
logo-lang
grunt-contrib-imagemin
misfire-instruction
caroufredsel
pyxplot
dd4t
wordbreaker
cloudmade
django-tinymce
libx264
idoc
quit
invalidoperationexception
certificate-revocation
django-admin-tools
parsec
jmesa
mcpd
rjs
log-shipping
windows-xp-embedded
mismatch
pixel-bender
manuals
unauthorized
cons

Resources

Encrypt Message