Javascript React Router和React Intl：是否有更好的方法动态加载翻译'；什么路线？

我希望在页面的路径改变时动态加载页面的翻译。我在每条路线上都使用了onEnter

有没有更好的方法来实现这一点？我是否可以避免对每个路由使用onEnter回调函数

var  Root = React.createClass({       
    baseTranslations : {},

    getInitialState: function(){    
        return {
            lang: 'it',
            translations: null,
        };    
    },    

    componentWillMount: function() {    
        // load the common translation for all routes            
        this.setState({
            lang: this.getLocale().lang
        }); 
        this.loadTranslation("base");
    },

    onChangeRoute: function(nextState, replace){
        // load the specific route's translation
        this.loadTranslation(nextState.location.pathname);
    },

    getLocale: function(what){
        // return lang and user region (ex: it-IT)    
    },

    loadTranslation: function(route){    
        var lcl = route;    
        var mapping = {
            '/'     : 'home',
            'auth'  : 'dashboard'
        };

        if(route in mapping){
            lcl = mapping[route];
        }

        $.ajax({
            url: './locales/' + this.state.lang +'/' + lcl + '.json',
            dataType: "text",
        }).done(function(res) {

            if(lcl === "base"){
                this.baseTranslations = JSON.parse(res);
            }

            this.setState({
                translations: $.extend(true, this.baseTranslations, JSON.parse(res))
            });

        }.bind(this));

    },

    render: function() {
        var children;

        if (this.state.translations) {
            children = (
                <IntlProvider locale={this.state.lang} messages={this.state.translations}>
                    <Router history={browserHistory}>
                        <Route path="/" component={App}>
                            <IndexRoute component={Home}/>

                            <Route path="signup"  onEnter={this.onChangeRoute} getComponents={(location, cb) => {

                                 require.ensure([], (require) => {
                                        cb(null, require('./components/Signup.jsx'))
                                 }, "Signup")

                            }} />     

                            <Route path="*" component={NoMatch}/>
                        </Route>
                    </Router>
                </IntlProvider>
            );
        }

        return <div>{children}</div>;
    }
});


ReactDOM.render(
    <Root/>,
    document.getElementById('rct-cont')
);

var Root=React.createClass（{
基本翻译：{}，
getInitialState:函数（）{
返回{
朗：“它”，
翻译：空，
};    
},    
componentWillMount:函数（）{
//加载所有路由的公共转换
这是我的国家({
lang:this.getLocale（）.lang
}); 
本文件为“基础”；
},
onChangeRoute:功能（下一状态，替换）{
//加载特定路线的平移
this.loadTranslation（nextState.location.pathname）；
},
getLocale:函数（什么）{
//返回语言和用户区域（例如：it）
},
loadTranslation:函数（路由）{
var lcl=路线；
变量映射={
“/”：“家”，
“验证”：“仪表板”
};
if（映射中的路由）{
lcl=映射[路线]；
}
$.ajax({
url:'./locales/'+this.state.lang+'/'+lcl+'.json'，
数据类型：“文本”，
}).完成（功能（res）{
如果（lcl==“基本”）{
this.baseTranslations=JSON.parse（res）；
}
这是我的国家({
翻译：$.extend（true，this.baseTranslations，JSON.parse（res））
});
}.约束（这个）；
},
render:function（）{
儿童；
if（this.state.translations）{
儿童=(
{
要求。确保（[]，（要求）=>{
cb（null，require（'./components/Signup.jsx'））
}“注册”）
}} />     
);
}
返回{children}；
}
});
ReactDOM.render(
,
document.getElementById（'rct-cont'）
);

由于很难说您将使用哪种Flux实现，我将在这里为您提供伪代码和关键思想：

i18nActions

• loadLanguage（语言，路由）

  -如果给定路由的语言尚未加载，则会触发查询，然后将结果委托给存储
• 如果需要，可以在此处实现缓存层（

  localStorage

  ）。不过，您需要注意无效性。您应该有一些方法来判断数据已经过时，需要刷新

i18nStore

• 保持i18n状态对用户可见。您将从UI级组件中使用此状态

根目录

• 在

  oneter

  处触发

  loadLanguage

  以更新存储
• 使用存储并将数据传递到

  IntlProvider

  。其他组件可以从该上下文中挖掘i18n数据

---

---

还有其他问题，比如加载翻译时要做什么。那你应该展示什么呢？您可以延迟向用户显示UI，也可以使用占位符，一旦收到数据，占位符将被替换。

如何管理应用程序的状态？一种选择是将其推送到您的状态管理解决方案，并按需查询i18n。@bebraw我将使用Flux管理您的翻译是如何组织的？根据代码，似乎是每条路线。如果没有太多需要翻译的内容，也许您可以在一个查询中加载整个i18n数据。如果您想清理当前的解决方案，可以考虑将I18N状态推送到磁通存储区。@ BBRAW，每个路由都有一个JSON文件，对于某些路由，翻译可能有很多文本。关于如何使用Flux和React intl实现它，你有什么联系吗？没有。您可以将i18n存储在flux存储中，并对其进行操作（按路径加载语言，选择语言）。如果需要，您可以在那里执行基本缓存，甚至可以将i18n数据存储到

localStorage

。当您了解更多关于通量的知识时，这可能更有意义。