如何切换回 Next.js 中的默认语言环境？

Question

在 Next.js 应用程序中，我使用 next-i18next 多语言模块，工作正常。有两种语言，一种是英语，一种是阿拉伯语。默认为英语。

为了切换，我在NavBar中使用了以下代码。

import { useRouter} from "next/router"
import { useTranslation } from 'next-i18next'
import { useState } from 'react'

const NavBar = ({...props}) => {
    const router = useRouter()
    const { t } = useTranslation('navbar');
    const [language, setLanguage] = useState(router.locale)

const onChangeLanguage = (lang) => (e)=> {
        e.preventDefault()
        if(lang === 'ar') {
            router.push('ar')
        } else {
            
            router.push('/')
        }
    }

return (
  <>
    .....
    .....
    <div className="form-check form-check-inline">
      <input type="checkbox" className="form-check-input" id="en" onClick={onChangeLanguage('en')} value="en" defaultChecked = {language === 'en'} />
      <label className="form-check-label" htmlFor="inlineCheckbox1">English</label>
    </div>
    <div className="form-check form-check-inline">
      <input type="checkbox" className="form-check-input" id="ar" onClick={onChangeLanguage('ar')} value="ar" defaultChecked = {language === 'ar'} />
      <label className="form-check-label" htmlFor="inlineCheckbox2">Arabic</label>
    </div>
  </>
 )
}

export default NavBar;

所以在主页上，即 http://localhost:3000，当我检查阿拉伯语时，它会在 URL 之后附加 /ar 并且工作正常，但它会在内部页面中产生问题。

我有这样的页面结构

pages
   index.js
   settings 
      locations
        index.js
        add.js
        edit
          [...id].js
      products
        index.js
        add.js
        edit
           [...id].js

如果我尝试在内部页面上将语言环境从 en 更改为 ar，例如http://localhost:3000/settings/products 然后它重定向到 http://localhost:3000/settings/ar URL 那里它没有找到任何路由所以 404 出现。

如果我从主页 [http://localhost:3000/ar] 设置了 ar 语言环境，那么如果我在任何内部页面上将语言环境从 ar 更改为 en，例如http:localhost:3000/ar/settings/localtion/edit/<UUID> 那么它不会将语言设置为 en。

Answer 1

要保留当前路线但更改区域设置，您可以使用 router.asPath 作为 url 然后在 [=15 的选项对象（第三个参数）中传递 locale =].

const onChangeLanguage = (lang) => (e) => {
    e.preventDefault()
    router.push(router.asPath, undefined, { locale: lang })
}

如何切换回 Next.js 中的默认语言环境？

How to switch back to the default locale in Next.js?

javascript

internationalization

reactjs

next.js

next-router