I'm building a web app, with latest React and React Router version, in my case my app supports many languages, and due to indexing, we have separate entry html files for each language. So for a url like this myapp.com, we would have
myapp.com/en/ - for english
myapp.com/de/ - for german etc...
On the server side each of these /en/ folders would of course have their own index.html file with meta, title and other metadata written in the given language and they all have entry to our React app (bundle.js)
I already built something like this previously with Router Hash History, so my app looked like myapp.com/en/#/home, and my main route in routes.js of course looked like this
<Route path="/" component={MainComponent}
Now I want to use BrowserRouter, and I want my routes to look like this if the url is myapp.com/en/ the link would be:
<Link to="/home" />
And once clicked it would take you to myapp.com/en/home and it would render correctly the Compnent that is linked to it in the Route
<Route path="/home" exact component={HomeContainer} />
Basically at the moment this would only work if I did something like this
<Link to=`/${getCurrentLanguage()}/home` /
and the route is like this
<Route path=`/${getCurrentLanguage()}/home` exact component={HomeContainer} />
Which is maddness of course,
How can I achieve the desired behavior or do you have any different approach in mind? thanks
edit I'm not asking anything about React translations, I will be using i18next for translating the React side, I'm asking about the problem of Routing with different index.html files
There are two ways one can approach this
<BrowserRouter basename=`/${getLanguage()}`>
<Switch>
<Route path="/" exact component={Home} />
</Switch>
< /BrowserRouter>
So you can navigate freely with <Link to="/about" />
<Switch>
<Route path="/:lng/" exact component={Home} />
</Switch>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With