Next Js中如何获取URL的locale值

Question

在 Next Js 应用程序中，我使用 next-i18next 模块来支持多语言。它工作正常。

NabBar组件代码：

const NavBar = ({...props}) => {
  const router = useRouter()
  const { t } = useTranslation('navbar');


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

  .....
  <input type="radio" onClick={onChangeLanguage('en')} />
  <label >English</label>
  &nbsp;
  <Input type="radio" onClick={onChangeLanguage('ar')} />
  <label >Arabic</label>


  
}

export default NavBar;

单击阿拉伯语时，它会在域后应用 /ar。例如http://localhost:3000/ar

但现在我想在所有页面中显示选中的单选按钮。谁能建议我如何显示与所选语言对应的选中单选按钮。

Answer 1

您可以从路由器获取当前活动区域设置。可在 router.locale

购买

然后您只需检查复选框 ID 是否与活动语言环境匹配

Next Js中如何获取URL的locale值

How to get the locale value from URL in Next Js

javascript

reactjs

react-hooks

next.js

next-i18next