Is there a way that I don't have to build a few different pages for different languages?

[yingqi-chen]

To enable the translation feature, I use react-i18next. My file structure looks like this:

-src
  -locale
   -en
     -translation.js
   -zh
     -translation.js
  -pages
   -index.js
   -......js

So what is going on is that, I extract all the text on files in pages folder and put them in translation.js in different language folders, and when I click a button to change the language, all the files in pages will find the corresponding text from different language translation.js file accordingly.

But the route doesn't change at all. Is there a way for me to be able to do this: when I change the language, my route will change from /en/index to /zh/index?

I notice that in your instruction, you want me to set up different files for different languages in pages folder like:

File - src/pages/about.en.js

Is there a way that I don't have to build a few different pages for different languages? Thanks!