React-Router and React-Intl: Is there a better way to load dynamically the translation's route?
<p>I would to load dynamically the page's translation when its route change. I done it using onEnter for each route. </p>

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

<pre><code>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 = (
                &lt;IntlProvider locale={this.state.lang} messages={this.state.translations}&gt;
                    &lt;Router history={browserHistory}&gt;
                        &lt;Route path="/" component={App}&gt;
                            &lt;IndexRoute component={Home}/&gt;

                            &lt;Route path="signup"  onEnter={this.onChangeRoute} getComponents={(location, cb) =&gt; {

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

                            }} /&gt;     

                            &lt;Route path="*" component={NoMatch}/&gt;
                        &lt;/Route&gt;
                    &lt;/Router&gt;
                &lt;/IntlProvider&gt;
            );
        }

        return &lt;div&gt;{children}&lt;/div&gt;;
    }
});


ReactDOM.render(
    &lt;Root/&gt;,
    document.getElementById('rct-cont')
);
</code></pre>