2015-11-17 25 views
7

Sto costruendo un sito multilingue in cui la preferenza della lingua fa parte dell'URL, ad es.Supporto multilingua nel router di risposta

http://example.com/<somepage>  (Russian, default) 
http://example.com/en/<somepage> (English) 
http://example.com/jp/<somepage> (Japanese) 
http://example.com/../    (etc) 

Tutto è ok, quando uso prefisso per tutte le lingue:

<Route path="/:lang"> 
    <Route path="somepage" component={Somepage}/> 
</Route> 

Ma per lingua di default, non ho bisogno di includere la lingua in url, come mostrato nell'esempio. In router fluxible può essere risolto utilizzando regexp nel percorso:

path: '/:lang([a-z]{2})?/<somepage>' 

Ma non funziona in reagiscono router, perché percorso deve essere una stringa, non un regexp. Qualche idea su come gestire questo caso d'uso?

risposta

4

Hai provato a duplicare i percorsi? Sembra che ora lavori per me.

var innerRoutes = (
    <Route> 
    <Route path="somepage" component={Somepage}/> 
    <Route path="otherpage" component={Otherpage}/> 
    </Route> 
); 

var routes = (
    <Route path="/" component={App}> 
    {innerRoutes} 
    <Route path=":lang"> 
     {innerRoutes} 
    </Route> 
    </Route> 
); 
+0

E i traduttori interni sono anch'essi tradotti? Devo elencare tutti i percorsi uno per uno? E se è così, quando l'utente cambia le impostazioni internazionali dalla mia applicazione, come posso recuperare il giusto percorso tradotto? – cl0udw4lk3r

2

i percorsi dovrebbero assomigliare:

<Router history={createBrowserHistory()}> 
    <Route component={App}> 
    <IndexRoute component={Home} /> 
    <Route path=':lang/'> 
     <Route path='about' component={About} /> 
    </Route> 
    <Redirect from='*' to='ru/about' /> 
    </Route> 
</Router> 

La barra finale nel :lang/ indica che sarà pari solo se l'URL contiene qualcosa dopo di esso (ad es /de/about) altrimenti c'è un Redirect con un corrispondenza avida che reindirizzerà sempre alla pagina specificata nel parametro to. Puoi leggere di più su Route Matching in the docs.

+0

Non ho bisogno di un reindirizzamento, voglio che gli URL siano esattamente come nell'esempio a scopo di SEO. –

+0

Non ho modificato l'aspetto dei tuoi URL, hanno esattamente l'aspetto che vuoi che appaiano. Ti mostro solo il modo in cui puoi realizzarlo con il React Router. Leggi i documenti di corrispondenza del percorso per vedere come abbiniamo i percorsi. – knowbody

+0

Ho letto i documenti molte volte, ma non riesco a capire come ottenere un simile comportamento senza regexp. Il codice sotto funziona come voglio, ma è brutto, non mi piace tale duplicazione nei percorsi:

Problemi correlati