javascript - 如何从 Next Js 中的 URL 获取语言环境值

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 是否与活动区域设置匹配