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

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
react-route display blank page
react native router flux: override android hardware back key
can't type in input fields when using material-ui-redux-form due to re rendering
undefined within the react component - but not in action
Updating a nested state in redux using Object.assign
Typescript input onchange event.target.value
ReactComponentTreeHook unexpected : Webpack 2
ReactJS: Uncaught TypeError: Cannot read property 'subscribe' of undefined(…)
Draft-js apply inline-styles to readonly editor
About injectScript in WebView for React-Native
My flux store gets re-instantiated on reload
React Mobx - component not updating after store change
Property not found - flowtype / react, using this
Render React nested components
React.JS Navigating to hash route does not update view

Categories

HOME
skype-for-business
botframework
marie
intellij-idea
jenkins-pipeline
openacc
casting
x509certificate
bitbucket
ms-application-insights
msbi
terminal
opacity
kendo-asp.net-mvc
wavefront
token
phpexcel
google-app-maker
fetch
mbed
android-notifications
background-image
pylint
alert
gpo
xforms
gomobile
aws-iot
concatenation
functional-dependencies
priority-queue
knapsack-problem
smart-device
azure-table-storage
vtd-xml
andengine
urhosharp
visual-studio-debugging
log4net-configuration
eclipse-jdt
offset
leaderboard
dotnetnuke-module
motion
origami
jvisualvm
collation
mtm
serialversionuid
openpgp.js
multi-select
cardview
recursive-query
portaudio
qudpsocket
computed-properties
easy68k
class-design
recurring
change-password
window.location
android-progressbar
windows-phone-8-emulator
autoscaling
p4python
android-networking
genero
fiware-health
disabled-control
pyalgotrade
lettuce
jsmpp
xps
codio
php-amqplib
svg-android
pechkin
wpd
junction-table
blotter
algol
cron4j
big-endian
shapado
states
blackberry-eclipse-plugin
zend-validate
session-hijacking
peoplepicker
funambol
lightopenid
meego-harmattan
conditional-operator
viewdata
nyromodal
dongle
versions
large-data-volumes
focus-stealing
retrospectiva

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