javascript - 如何在反应应用程序中使用 i18next 和反应路由器 dom 修补链接？

Question

我希望在更改语言时创建地址中的语言缩写，例如 localhost:3000/firstpage/en

他希望有人帮助我使用哪些库以及如何使用它，因为我什至不知道如何开始。

这是一个简单的项目结构

/src/i18n.js - i18n 设置

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector'
import {initReactI18next} from 'react-i18next';

i18n.use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    
    fallbackLng: 'pl',
    debug: false,
    detection: {
        order: ['queryString', 'cookie'],
        cache: ['cookie']
    },
    interpolation: {
        escapeValue: false,
    },
    returnObjects: true
  });

export default i18n;

/src/index.js

import React, { Suspense } from "react";
import ReactDOM from 'react-dom';

import App from './App';
import './i18n';

ReactDOM.render(
  <Suspense fallback={<>Loading.. </>}>
    <App />
  </Suspense>,
  document.getElementById('root')
);

/src/App.js

import React from "react";
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Header from './components/Header'
import HomePage from './components/Page/HomePage'
import FirstPage from './components/Page/FirstPage'
import SecondPage from './components/Page/SecondPage'
import './App.css'

export default function App() {
  return (
    <>
      <BrowserRouter>               
        <Header/>
        <Switch>

            <Route exact path="/" component={HomePage} /> 
            <Route path="/FirstPage" component={FirstPage} />
            <Route path="/SecondPage" component={SecondPage} />  
      
        </Switch>                               
      </BrowserRouter>
    </>
  )
}

/src/components/Header.js

import React from 'react'
import {Link} from "react-router-dom";
import { useTranslation } from 'react-i18next'

export default function Header() {

    const {i18n} = useTranslation()

    const changeLanguage = (language) => {
        i18n.changeLanguage(language)
    }

    return (
        <div>
            Header:
            <ul>
                <li> <Link to="/"> HOME PAGE </Link></li>
                <li> <Link to="/FirstPage"> First Page </Link></li>  
                <li> <Link to="/SecondPage"> Secon dPage </Link></li> 
            </ul>
            <div>
                Lang Selector
                <ul>
                    <li>
                        <button onClick={() => changeLanguage("en") } >EN</button>
                    </li>
                    <li>
                        <button onClick={() => changeLanguage("pl") } >PL </button>
                    </li>
                </ul>
            </div>
        </div>
    )
}

/src/components/Page/FirstPage.js -- 示例子页面

import React from 'react'
import { useTranslation } from 'react-i18next'

export default function FirstPage() {
    const {t} = useTranslation()

    return (
        <div>
            -- [FirstPage] -- 
            <div>
                - {t("FirstPage.Comment1")} <br/> <br/>
                - {t("FirstPage.Comment2")}
            </div>
        </div>
    )
}

/public/locales/en/translation.json - 示例翻译

{
    "Home": {
        "Hi": "Hello"
    },
    "FirstPage":{
        "Comment1": "How are u?",
        "Comment2": "Fine, and u?"
    }
}

标签： javascriptreactjsreact-router-domreact-i18next