Feat: Change the route when language is changed

src/App.js

@@ -18,19 +18,19 @@ const App = () => {
 
   const pages = [
     {
-      pageLink: '/',
+      pageLink: '/:lang/',
       view: Home,
       displayName: 'Home',
       showInNavbar: true,
     },
     {
-      pageLink: '/blog',
+      pageLink: '/:lang/blog',
       view: Blog,
       displayName: 'Blog',
       showInNavbar: true,
     },
     {
-      pageLink: '/about',
+      pageLink: '/:lang/about',
       view: About,
       displayName: 'About',
       showInNavbar: true,
@@ -73,12 +73,12 @@ const App = () => {
               <Route
                 exact
                 path={page.pageLink}
-                render={({match}) => <page.view />}
+                component={page.view}
                 key={index}
               />
             );
           })}
-          <Redirect to="/" />
+          <Redirect to="/english/" />
         </Switch>
       </Suspense>
     </div>

src/components/Home.js

@@ -1,11 +1,13 @@
 import {API_ROOT_URL} from '../constants';
 import useIsVisible from '../hooks/useIsVisible';
 import useStickySWR from '../hooks/useStickySWR';
+import locales from '../i18n/locales.json';
 import {fetcher} from '../utils/commonFunctions';
 
 import classnames from 'classnames';
-import React, {useState, useRef, lazy, Suspense} from 'react';
+import React, {useState, useRef, lazy, Suspense, useEffect} from 'react';
 import {Helmet} from 'react-helmet';
+import {useTranslation} from 'react-i18next';
 import {useLocation} from 'react-router-dom';
 import {useLocalStorage, useSessionStorage, useWindowSize} from 'react-use';
 
@@ -20,7 +22,12 @@ const Level = lazy(() => import('./Level'));
 const MapSwitcher = lazy(() => import('./MapSwitcher'));
 const StateHeader = lazy(() => import('./StateHeader'));
 
-function Home() {
+function Home({match}) {
+  const {i18n} = useTranslation();
+  const currentLanguage = Object.keys(locales).includes(match.params.lang)
+    ? match.params.lang
+    : i18n?.options?.fallbackLng[0];
+
   const [regionHighlighted, setRegionHighlighted] = useState({
     stateCode: 'TT',
     districtName: null,
@@ -57,6 +64,12 @@ function Home() {
   const isVisible = useIsVisible(homeRightElement);
   const {width} = useWindowSize();
 
+  useEffect(() => {
+    if (i18n) {
+      if (i18n) i18n.changeLanguage(currentLanguage);
+    }
+  }, [i18n, currentLanguage]);
+
   return (
     <React.Fragment>
       <Helmet>

src/components/LanguageSwitcher.js

@@ -5,11 +5,13 @@ import classnames from 'classnames';
 import React, {useRef, useCallback} from 'react';
 import {ArrowUp} from 'react-feather';
 import {useTranslation} from 'react-i18next';
+import {useHistory} from 'react-router-dom';
 import {useTransition, animated} from 'react-spring';
 import {useClickAway} from 'react-use';
 
 function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) {
   const {i18n} = useTranslation();
+  const history = useHistory();
   const currentLanguage = Object.keys(locales).includes(i18n?.language)
     ? i18n?.language
     : i18n?.options?.fallbackLng[0];
@@ -32,9 +34,11 @@ function LanguageSwitcher({showLanguageSwitcher, setShowLanguageSwitcher}) {
 
   const switchLanguage = useCallback(
     (languageKey) => {
-      if (i18n) i18n.changeLanguage(languageKey);
+      i18n.changeLanguage(languageKey);
+      history.push(`/${languageKey}/`);
+      setShowLanguageSwitcher(!showLanguageSwitcher);
     },
-    [i18n]
+    [i18n, history, setShowLanguageSwitcher, showLanguageSwitcher]
   );
 
   return transitions.map(({item, key, props}) =>

src/components/MapExplorer.js

@@ -270,7 +270,7 @@ function MapExplorer({
               <div
                 className="back fadeInUp"
                 onClick={() => {
-                  history.push('/#MapExplorer');
+                  history.push('/');
                 }}
                 style={trail[4]}
               >

src/components/Navbar.js

@@ -74,19 +74,21 @@ function Navbar({
 
         {windowSize.width > 769 && (
           <React.Fragment>
-            <Link to="/">
+            <Link to={`/${currentLanguage}/`}>
               <span>
-                <Icon.Home {...activeNavIcon('/')} />
+                <Icon.Home {...activeNavIcon(`/${currentLanguage}/`)} />
               </span>
             </Link>
-            <Link to="/blog">
+            <Link to={`/${currentLanguage}/blog`}>
               <span>
-                <Icon.Book {...activeNavIcon('/blog')} />
+                <Icon.Book {...activeNavIcon(`/${currentLanguage}/blog`)} />
               </span>
             </Link>
-            <Link to="/about">
+            <Link to={`/${currentLanguage}/about`}>
               <span>
-                <Icon.HelpCircle {...activeNavIcon('/about')} />
+                <Icon.HelpCircle
+                  {...activeNavIcon(`/${currentLanguage}/about`)}
+                />
               </span>
             </Link>
             <span>
@@ -99,7 +101,9 @@ function Navbar({
       {transitions.map(({item, key, props}) =>
         item ? (
           <animated.div key={key} style={props}>
-            <Expand {...{pages, setExpand, darkMode, windowSize}} />
+            <Expand
+              {...{pages, setExpand, darkMode, windowSize, currentLanguage}}
+            />
           </animated.div>
         ) : (
           <animated.div key={key} style={props}></animated.div>
@@ -109,7 +113,7 @@ function Navbar({
   );
 }
 
-function Expand({pages, setExpand, darkMode, windowSize}) {
+function Expand({pages, setExpand, darkMode, windowSize, currentLanguage}) {
   const expandElement = useRef(null);
   const {t} = useTranslation();
 
@@ -123,14 +127,20 @@ function Expand({pages, setExpand, darkMode, windowSize}) {
         if (page.showInNavbar === true) {
           return (
             <Link
-              to={page.pageLink}
+              to={
+                page.displayName === 'Home'
+                  ? `/${currentLanguage}/`
+                  : `/${currentLanguage}/${page.displayName.toLowerCase()}`
+              }
               key={i}
               {...(windowSize.width < 769 && {
                 onClick: setExpand.bind(this, false),
               })}
             >
               <span
-                {...navLinkProps(page.pageLink, page.animationDelayForNavbar)}
+                {...navLinkProps(
+                  page.pageLink.replace(':lang', currentLanguage)
+                )}
               >
                 {t(page.displayName)}
               </span>
@@ -151,7 +161,7 @@ function Expand({pages, setExpand, darkMode, windowSize}) {
 
 export default Navbar;
 
-const navLinkProps = (path, animationDelay) => ({
+const navLinkProps = (path) => ({
   className: `${window.location.pathname === path ? 'focused' : ''}`,
 });