Je ne peux pas faire de site Web multilingue en me basant sur React Router

Question

J'essaye de faire un SPA multilingue avec React et de compter sur React-Router.

Voici une version simplifiée du fichier d'entrée:

// define the routes for each language .. 
const InnerRoutes = (
    <Route> 
     <IndexRoute page="home" component={InnerPage}></IndexRoute> 
     <Route path="(:page)" component={InnerPage}></Route> 
    </Route> 
); 

// define the routes for all the languages, using InnerRoutes .. 
const AllRoutes = (
    <Router history={browserHistory}> 
     <Route path='/' component={App} language="bg"> 
      {InnerRoutes} 
      <Route path="en" language="en"> 
       {InnerRoutes} 
      </Route> 
     </Route> 
    </Router> 
); 

// and render our app .. 
ReactDOM.render(
    AllRoutes, 
    document.getElementById('app') 
); 

Alors, je le App élément de haut niveau et la composante InnerPage.

La question est:

1. Lorsque le changement de navigation se produit - InnerPage mises à jour et (éventuellement) un nouveau rendu.

intérieur InnerPage:

2. J'ai accès à la page demandée via la propriété page. Je n'ai malheureusement pas accès à la propriété language.

Et voilà pourquoi InnerPage ne peut pas extraire les données à partir d'un point final - il connaît le page, mais pas le language.

Answer 1

Le routeur passe un accessoire routes à tous les composants de routage, qui correspond à l'ensemble des itinéraires correspondants. Par exemple, sur /, cela ressemblerait à ceci: [{ path: '/', language: 'bg'}, { }, { page: 'home' }].

Ainsi, selon la façon dont vous voulez traiter les cas d'avoir aucune ou plusieurs langues déclarées par les différents itinéraires adaptés, vous pouvez faire quelque chose comme ceci:

const lang = this.props.routes.reduce((lang, route) => { 
    return route.language || lang; 
}, defaultLang); 

qui donnerait la priorité à la langue donnée par intérieure routes.

En regardant votre config de route, il y a deux choses que je dois mentionner:

1. Dans vos InnerRoutes, les valeurs de page pour <IndexRoute page="home" ... /> et <Route path="(:page)" ... /> sont exposés différemment. Le premier est un accessoire sur un itinéraire (comme language) et peut être consulté via this.props.route.page, tandis que le dernier est un paramètre d'URL (this.props.params.page).

2. L'anglais <IndexRoute> n'est pas accessible, car la route bulgare :page vient avant et correspond également. Vous pouvez résoudre ce problème en déplaçant les routes anglaises vers le haut.

est ici un jsbin démontrant les points que je parlais: http://jsbin.com/siqake/5/edit?js,output