反应路由器重新渲染

Question

我在React JS中有一个带有两个不同标题的页面（用于主页和用于注册页面）。

我的主应用程序（显示两个标头之一，显示反应路由器）如下：

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;

它可以正常工作。 但是问题是当我尝试更改语言时。 当我在用于首页的HEADER组件上执行此操作时，它可以完美工作。

HEADER组件代码如下：

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;

但是，当我在HeaderCompact组件（用于注册页面）上执行此操作时，它会更改语言，但会将我重定向到主页。 我想留在注册页面上。 当我再次单击链接转到注册页面时，注册页面将以正确的语言显示。

我的HeaderCompact组件如下：

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;

因此，一切正常，唯一的问题是，当我尝试从注册页面更改语言时，它将我重定向到主页。

Answer 1

如果您要尝试除实际导航之外的其他操作，请不要使用<Link /> 。 您可以将语言触发器更改为常规的<a>或<button>元素。 当您选择新语言时，状态更改应处理数据的重新加载。

Answer 2

我找到了解决方案。 问题出在changeLang函数中。 我忘了防止链接的默认行为。 更改功能必须为：

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});
    }
}