react Router, add variable to url before view routing

Question

I started to build next website using reactJS and nodejs. The website is required to have minimum 2 languages and it should be possible to share link to website in desired language. I concluded quickly that what i need is to have following url structure

domain.com/en-GB
domain.com/en-GB/gallery
domain.com/en-GB/contact

front end Router:

  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

  ...
  <Router>
    <React.Fragment>
      <Header />
        <Suspense fallback={<Loading />}>
          <Switch>
            <Route exact path="/">
              <Landing />
            </Route>
            <Route path="/gallery">
              <Gallery />
            </Route>
            <Route path="/about-us">
              <AboutUs />
            </Route>
            <Route path="/contact">
              <Contact />
            </Route>
            <Route>
              <PageNotFound />
            </Route>
          </Switch>
        </Suspense>
      <Footer />
    </React.Fragment>
  </Router>
  ...

front end menu:

import { NavLink } from "react-router-dom";

...
<NavLink to="/about-us">
    {Lang.resolve("HEADER_MENU_ABOUT_US")}
</NavLink>
...

pieces of webpack config:

...
const extractTextPlugin = new ExtractTextPlugin({
  filename: "css/style.[hash:8].css",
  allChunks: true
});

module.exports = {
  ...
  output: {
    filename: "js/main.[hash:8].js"
  }
  ...
},
...

server routing:

...
const router = express.Router();

let landing = (req, res, next) => {
  res.sendFile(path.join(__dirname, "../../index.html")); // html build by webpack
};

router.get("/", landing);
router.get("/:view", landing);
...

I was wondering if there is something already baked into reactJS to allow this or i need to manually append language part of url like: <Route path={_LANG_ + "/gallery"}>.

Probably some adjustments are also needed to the server routing and webpack paths otherwise it will be a problem while loading css, js files domain.com/en-GB/css/style.css.

Maybe someone already fought this idea and could have some tips.

Lucas L. · Accepted Answer · 2020-06-10 08:04:55Z

1

I am not sure how you gonna handle the translations on each component, but if you have different components (according to the language), then an option would be having different "basenames" on your Router:

<BrowserRouter basename="/calendar">
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
...
</BrowserRouter>

From the documentation: https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

Similar question: Multiple BrowserRouter Shows Multiple Components

edited Jun 10, 2020 at 8:04

answered Jun 10, 2020 at 7:59

Lucas L.

4373 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mevia Over a year ago

the thing is that having 5 components to render the same thing just because you have 5 languages, its pretty duplicative and bad practice. Language strings are just taken from translation file and injected {Lang.resolve("TRANSLATION_KEY")}, so this solution is probably very poor one.

Lucas L. Over a year ago

Now that you explicitly gave us more information, I agree this is a poor one for your approach. I found this article: medium.com/prototyped/…. It uses react-intl from FormatJS. Maybe it give you a hint?

Collectives™ on Stack Overflow

react Router, add variable to url before view routing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related