React-Router和React-Intl：是否有更好的方法来动态加载翻译的路由？

Question

I would to load dynamically the page's translation when its route change. I done it using onEnter for each route.

Is there a better way to implement this? Can I avoid to use onEnter callback function for each route?

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

Answer 1

As it's hard to say which Flux implementation you are going to use, I'll give you pseudocode and the key ideas here instead:

i18nActions

• loadLanguage(language, route) - If a language for the given route hasn't been loaded, this triggers a query and then delegates the result to the store.
• You can implement a caching layer here ( localStorage ) if you want. You need to be careful about invalidation, though. You should have some way of telling that data has become stale and needs to be refreshed.

i18nStore

• Maintains i18n state visible to the user. You would consume this state from your UI level components.

Root

• Triggers loadLanguage at onEnter to update the store.
• Consumes the store and passes the data to IntlProvider . Other components can dig the i18n data from that context.

---

There are additional questions like what to do while the translations are loading. What should you show then? You can either defer displaying the UI to the user or you can use placeholders that will get replaced once the data has been received.