Как перевести реактивный маршрутизатор Маршруты маршрута

Question

Мое приложение имеет несколько локалей (это, en).

Мне нужно перевести все маршруты. Например, у меня есть страница термины и условия, которые в пути (по одному на местности):

• it/termini
• en/terms

мне нужно, чем делать что-то вроде:

// routes.js 

const routes = (
    <Route path="/" component={App}> 
    <IndexRoute component={HomePage} /> 
    <Route path="(it/termini)(en/terms)" component={TermsPage} /> 
    <Route path="*" component={NotFoundPage} /> 
    </Route> 
) 

Как вы можете видеть, это фанковое решение не так хорошо подходит для масштабируемости приложения.

Answer 1

Мой нынешний подход с локализацией маршрутов заключается в том, чтобы иметь дело с ними, как с любым локализованным контентом. В вашем случае я хотел бы сделать:

// routes.js 

function createRoutes(language) { 
    /* 
    You'll probably have more work to do here, 
    such as sub-routes initialization 
    component's type selection logic, etc. 

    @note: _t(key, language) is your 
      translation function 
    */ 

    return (
     <Router 
      key={language} 
      path={_t("it/termini", language)} 
      component={TermsPage} 
     /> 
    ) 
} 

let localizedRoutes = supportedLanguages.map(createRoutes) 

const routes = (
    <Route path="/" component={App}> 
    <IndexRoute component={HomePage} /> 
    {localizedRoutes} 
    <Route path="*" component={NotFoundPage} /> 
    </Route> 
) 

Затем вы можете указать их в файлы перевода, как и любой другой строки, в том числе любого параметра:

// en.js 

module.exports = { 
//... 
    "it/profilo/:userId" : "en/profile/:userId" 
//... 
} 

Вы также можете собрать их на лету перед ваши маршруты определены, связывая их с соответствующим ключом перевода.

Таким образом он/ становится концы только ключ вашего переведенной URL, вы можете также использовать что-то не похожее на базовый URL, как терминов-страницы-URL.

Этот метод также позволяет дифференцировать компоненты маршрута и/или вспомогательные маршруты на один язык, что является дополнительным бонусом. Просто реализуйте логику внутри вашей функции сопоставления (или там, где это подходит для вашего приложения).