React Js how to jump whole pages to other pages when click on the navigation button

user_13926125 0
Viewed 501

I am doing a react js project which include dual language when click on button eng/chi, My whole Pages need to change to english include header and footer. So i had create 2 .js every file which is chi and eng.
How do i jump to the EngMainPage when i click on the button?
In my App.js i using this ways to make it the 1st page when i start the program

import ChineseHomePage from './components/pages/Chinese/ChineseHomePage'

<Switch>
   <Route path='/' exact component={ChineseHomePage } />         
</Switch>

In my ChineseHomePage i use <Navbar /> to call for the section （under ./components/pages/Chinese/ChineseHomePage)
In my Navbar i have one part which try to use

<li className='nav-item'>
<Link to = {"/WHATSHOULDIPUTHERE"} className='nav-links' onClick={closeMobileMenu}>
  中文 / Eng
</Link>
</li>

The objective is when i click on the link, i want to redirect the website to a file at /components/pages/Eng/EngHomePage.js which part should i add the Route path and what should put in WHATSHOULDIPUTHERE

reactjs javascript
2 Answers

I would use same routes and dynamic components like this:

...
<Route path='/' exact component={HomePage}/>
...
const HomePage = () => {
   const [lang, setLang] = useState('eng');

   return lang === 'eng' ? <EnglishHomePage/> : <ChineseHomePage/>
}
user_153224970

You can follow the following methods to fulfill your objective. Personally I prefer method 2 due to that method provides a more robust solution.

Method 1

Define two routes for each Home page component and navigate to relevant route when needed.

App.js

import ChineseHomePage from './components/pages/Chinese/ChineseHomePage'
import EnglishHomePage from './components/pages/Eng/EngHomePage'

<Switch>
   <Route path='/ch' exact component={ChineseHomePage} />
   <Route path='/en' exact component={EnglishHomePage} />         
</Switch>

NavBar.js

<li className='nav-item'>
    <Link to="/ch" className='nav-links' onClick={closeMobileMenu}>
        中文
    </Link>
    /
    <Link to="/en" className='nav-links' onClick={closeMobileMenu}>
        Eng
    </Link>
</li>

Method 2

use an useState hook to set your language and render the relevant component according to the set language.

Note: You have to pass the dispatch function of language hook from App.js to other components as a prop.

App.js

import ChineseHomePage from './components/pages/Chinese/ChineseHomePage'
import EnglishHomePage from './components/pages/Eng/EngHomePage'

const [language, setLanguage] = useState('eng');

<Switch>
   <Route path='/' exact component={() => {
      language == 'eng' ? (<EnglishHomePage setLanguage={setLanguage} />) : (<ChineseHomePage setLanguage={setLanguage} />)
   }} />        
</Switch>

EngHomePage.js

const EnglishHomePage = ({ setLanguage }) => {
    ...
    <NavBar setLanguage={setLanguage} />
    ...
}

ChineseHomePage.js

const ChineseHomePage = ({ setLanguage }) => {
    ...
    <NavBar setLanguage={setLanguage} />
    ...
}

NavBar

const NavBar = ({ setLanguage }) => {
    ...
    <li className='nav-item'>
        <div className='nav-links' role='button' onClick={() => {
            setLanguage('chi');
            closeMobileMenu();
        }}>
            中文
        </div>
        /
        <div className='nav-links' role='button' onClick={() => {
            setLanguage('eng');
            closeMobileMenu();
        }}>
            Eng
        </div>
    </li>
    ...
}
user_104069950
Related