I have a page with two different headers in React JS (for homepage and for registration page).
My main app (where I show one of those two headers and where the react router is shown) is as follows :
var React = require('react');
var Header = require('../common/header');
var HeaderCompact = require('../common/headerCompact');
var Footer = require('../common/footer');
var App = React.createClass({
getInitialState: function(){
return {
lang: 1
};
},
changeLang: function(name, event){
switch (name){
case "fra" :
this.setState({lang: 2});
break;
case "ger" :
this.setState({lang: 3});
break;
case "ned" :
this.setState({lang: 4});
break;
default:
this.setState({lang: 1});
}
},
render: function () {
var currentRoute = this.props.location.pathname.slice(1);
var header = currentRoute === "" ? <Header onClick={this.changeLang} lang={this.state.lang}/> : <HeaderCompact currentRoute={currentRoute} onClick={this.changeLang} lang={this.state.lang}/>;
return (
<div>
{header}
{React.cloneElement(this.props.children, { lang: this.state.lang })}
<Footer lang={this.state.lang}/>
</div>
);
}
});
module.exports = App;
It works without problems. But the problem is when I try to change a language. When I do it on HEADER component, which is for homepage it works perfect.
HEADER component code is as follows :
var React = require('react');
var Link = require('react-router').Link;
var FontAwesome = require('react-fontawesome');
var Header = React.createClass({
render: function () {
var lang = this.props.lang;
var language = "";
switch (lang){
case 1 :
language = require('./languages/en');
var hideEng = "hideEng";
break;
case 2 :
language = require('./languages/fr');
var hideFra = "hideFra";
break;
case 3 :
language = require('./languages/de');
var hideGer = "hideGer";
break;
default:
language = require('./languages/nl');
var hideNed = "hideNed";
}
return (
<div>
<div id="sub-header">
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6 col-xs-12 headerLogo noPadding">
<Link to="/">
<img src="../images/logos/logo-header-compact.png" style={{paddingTop: 10}}/>
</Link>
</div>
<div className="col-lg-6 col-md-6 col-sm-6 col-xs-12 noPadding">
<ul className="langAndBtn">
<li className="col-lg-3 col-md-3 col-sm-3 col-xs-12" style={{paddingTop: 20}}>
<Link to="/" className={hideNed} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'ned')}><img src="../images/languages/nl.png" /></Link>
<Link to="/" className={hideEng} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'eng')}><img src="../images/languages/gb.png" /></Link>
<Link to="/" className={hideFra} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'fra')}><img src="../images/languages/fr.png" /></Link>
<Link to="/" className={hideGer} onClick={this.props.onClick.bind(this, 'ger')}><img src="../images/languages/ger.png" /></Link>
</li>
<li className="col-lg-9 col-md-9 col-sm-9 col-xs-12 text-center">
<div className="advanced-button text-center" style={{width: 215, margin: '0 auto'}}>
<Link to="registration" className="btnRegistrationHeader text-center" title="">
<span className="regHeaderText">{language.homePage.registrationButton}</span>
<FontAwesome name="user" className="faIcon" style={{borderLeft: '1px solid #a0acb8', borderTop: '1px solid #a0acb8', borderBottom: '1px solid #a0acb8'}}/>
</Link>
</div>
</li>
</ul>
</div>
<div className="clearfix"></div>
</div>
</div>
</div>
<div className="container pageTitle" style={{margin: '30px auto 0 !important', textAlign: 'center !important'}}>
<div className="homeTitle">{language.homePage.title}</div>
<div className="homeSubtitle">{language.homePage.subtitle}</div>
</div>
</div>
);
}
});
module.exports = Header;
But when I do it on HeaderCompact component (which is for registration page), it changes the language but it redirects me to the home page. And I want to stay on registration page. When I click again on the link to go to the registration page, the registration page is shown in correct language.
My HeaderCompact component is as follows :
var React = require('react');
var Link = require('react-router').Link;
var FontAwesome = require('react-fontawesome');
var HeaderCompact = React.createClass({
render: function () {
var lang = this.props.lang;
var language = "";
switch (lang){
case 1 :
language = require('./languages/en');
var hideEng = "hideEng";
break;
case 2 :
language = require('./languages/fr');
var hideFra = "hideFra";
break;
case 3 :
language = require('./languages/de');
var hideGer = "hideGer";
break;
default:
language = require('./languages/nl');
var hideNed = "hideNed";
}
var currentRoute = this.props.currentRoute;
if(currentRoute === "registration"){
var regButton = "";
var phoneNrLi = "phoneNrLi";
}else{
regButton = <li>
<div className="advanced-button">
<Link to="registration" className="btnRegistrationHeader" title="">
<span className="regHeaderText">Registration</span>
<FontAwesome name="user" className="faIcon" />
</Link>
</div>
</li>;
phoneNrLi = "";
}
return (
<div>
<div id="sub-header" style={{paddingBottom: 10}}>
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6 col-sm-12">
<div className="social-icons">
<ul>
<Link to="/" className="" >
<img src="../images/logos/logo-header-compact.png" style={{paddingTop: 10}}/>
</Link>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<ul className="langAndBtn">
<li className={phoneNrLi}>
<Link to="/" className={hideNed} style={{marginRight: 10}} onClick={this.props.onClick.bind(this, 'ned')}><img src="../images/languages/nl.png" /></Link>
<Link to="/" className={hideEng} style={{marginRight: 10}} onClick={this.props.onClick.bind(this, 'eng')}><img src="../images/languages/gb.png" /></Link>
<Link to="/" className={hideFra} style={{marginRight: 10}} onClick={this.props.onClick.bind(this, 'fra')}><img src="../images/languages/fr.png" /></Link>
<Link to="/" className={hideGer} onClick={this.props.onClick.bind(this, 'ger')}><img src="../images/languages/ger.png" /></Link>
</li>
{regButton}
</ul>
</div>
</div>
</div>
</div>
<div className="container" style={{margin: '0 auto !important', textAlign: 'center !important'}}>
</div>
</div>
);
}
});
module.exports = HeaderCompact;
Thus, everything works fine, only problem is that it redirects me to the homepage when I try to change language from a registration page.
Don't use <Link />
if you're trying anything else than actually navigating out of a view. You can change your language triggers to regular <a>
or <button>
elements. The state change when you select the new language should handle the reloading of data.
I found a solution. The problem was in changeLang function. I forgot to prevent default behavior of the link. The change function needs to be :
changeLang: function(name, event){
event.preventDefault();
switch (name){
case "fra" :
this.setState({lang: 2});
break;
case "ger" :
this.setState({lang: 3});
break;
case "ned" :
this.setState({lang: 4});
break;
default:
this.setState({lang: 1});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.