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

Clearing cache for log out in Relay.js app
Confirming Navigation with custom hash history does not work
undefined data from my action creator ? React/redux/thunk
Render a react element to a hidden area for measurement
Cannot read property 'panHandlers' of undefined
Webpack trying to hot reload react
react auto escapes my html tags
How could I convert a Mobx observable object into a string
can we reload the same component with different urls?
React Native alignSelf center and stretch to maxWidth?
combineReducers converts Immutable Map into plain JS object
undefined is not an object (evaluating 'this.props.replaceRoute(_Routes2.default.Home())')
“CSS module is undefined” error when using react-css-modules with react-router with locale and webpack
React App with Relay + Apollo client
react dynamic render with number
React Native : Implement TabBarIOS to Navigation Experimental

Categories

HOME
javafx
macros
teradata
phantomjs
file-upload
assign
opengl-es
download
localhost
mediarecorder
psexec
flowtype
open-search-server
rmarkdown
token
ios-universal-links
rename
osrm
logstash-configuration
saucelabs
swift3.1
background-image
hapijs
ejb-3.1
include-path
rndis
expressionengine
angular-schema-form
git-submodules
csproj
spring-data-gemfire
exacttarget
postgresql-9.6
traitsui
aweber
redhat-brms
nscollectionview
aspose.pdf
icu
qt-quick
risc
jks
sharpssh
richtext
xamarin-test-cloud
kendo-scheduler
firebase-job-dispatcher
papyrus
access-violation
settext
geokit
particle-system
vitamio
nsoperationqueue
code-translation
music-player
jsondoc
bluetooth-lowenergy-4.2
maven-antrun-plugin
updating
web-standards
transparentproxy
fileinputstream
teamwork
wingdb
google-experiments
backtrace
jsonmodel
api-eveonline
behance-api
nodeunit
new-operator
boofcv
netbeans-plugins
facebook-likebox
static-class
zend-db-table
extensibility
infinity.js
cocotron
magicsuggest
system.transactions
setcookie
mail-gem
doxia
php-gettext
django-1.4
animationdrawable
advanceddatagrid
virtual-printer
nbehave
cinder
qprocess
uccapi
content-delivery-network
disk-based
jgrowl

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