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

Reactjs with fetch for auth and access token, not able to parse response
change text of array item in React: undefined is not a function
How to measure SVG elements in React?
Keeping Material UI tabs and React Router in sync
Is it bad practice to do calculations and data tweaking in the saga in react?
Are Lambda in JSX Attributes an anti-pattern?
Not getting the simulate event to work to trigger click
Get updated state of component when calling method on class via enzyme
Stub/mock propTypes for testing
Remove items form the list in React js
React Native - text with background and a gap between multiple lines
ReactJS file-loader not working
is React dnd dragging state accessable from outside dragged items
How can a unique instance of a React component respond to the result of an async action using Flux?
React Router not loading new page. No errors
Reactjs background processing

Categories

HOME
model-view-controller
teradata
mobile
qemu
x509certificate
confluence-rest-api
symfony-3.2
meson-build
virtualhost
google-api-oauth
restheart
openbsd
elastalert
urllib2
guidewire
camunda
versioning
bootstrap-datetimepicker
typedef
connection-pooling
advertising
windows-10-mobile
request-uri
ds-5
tikz
ng2-bootstrap
rtos
sdl-2
rtsp
latency
mediastream
observer-pattern
datagridviewcombobox
head
scrapinghub
api-key
spring-ide
activeandroid
rivets.js
ng-class
google-cloud-shell
runtime-permissions
vertex
bioperl
r-commander
typewriter
group
scanf
esprima
therubyracer
huawei
sqlproj
eclipse-mars
hfp
queuing
database-administration
archiva
pebble-js
dcast
jersey-test-framework
cascading
gitk
jts
android-togglebutton
uinavigationitem
textblob
callfire
targetprocess
tinymce-plugins
chrome-mobile
uiblureffect
system.io.packaging
vundle
cocos2d-x-2.x
parallel-port
msdropdown
slimscroll
infor-eam
imaplib
netbeans-plugins
objectdatasource
uikit-dynamics
dnsbl
qt5.1
yii-components
bash4
sqlbuddy
unordered-set
soapexception
designated-initializer
nbehave
excellibrary
conditional-operator
for-xml
large-data-volumes
atmega16
bootstrap-protocol
stackless

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile