Route-based Language Switching on react-i18next

React-i18next is an incredible library for internationalizing your React application with a straight forward and easy-to-use interface. With built-in language detectors that can operate based off cookies and browser headers, you can easily customize your website for your visitors before any interaction with the page.

However, when you set or change the language of a session, it remains for that entire session (or longer if you use cookies) until you trigger another language change. Maybe you have a page that’s available in both French and English — even if someone visited the French page, you would want them to see English when they go to the English page.

With react-i18next, this can be as simple as triggering an i18next.changeLanguage in a componentDidMount or useEffect hook whenever a page loads. However, the transition is often noticeable as the page re-renders after loading and changing the language.

The Solution: Change the Language While Routing

If you use React, you likely use some routing system such as react-router or, in my case, Next.js’ built-in routing system. Typically, the routing process goes as follows:

routeChangeStart -> currentComponent unmounts -> routeChangeComplete -> nextComponent mounts

The solution to our language switching problems is to change the language during routeChangeComplete so that it’s ready for the first-render when the next component mounts.

In Next.JS, the easiest way to do this is by making a wrapper around the main Component that you can insert your i18next instance into, and then creating a routeChangeComplete listener.

(I’m using next-i18next with Next.js in this example)

Why not routeChangeStart? If you change the language during routeChangeStart, you may trigger a re-render of your current component, leading to a flash and negative user experience.

Why not during unmounting? You could, but you wouldn’t have any information about what the next page is.

As always, if you have any comments or suggestions, please write them below!