Link Select 选项与 React

Question

我想在更改 select 时更改 URL 以更改应用程序的语言

这是我的尝试：

<select name="lang" id="lang">
     <option value="fr"><a href="https://test.com/fr">FR </a></option>
     <option value="en"><a href="https://test.com/en">EN </a></option>
</select>

当有 <a> 标签时，option 从 select 中消失。有什么想法吗？

PS : 我正在使用 NextJS 和 i18n

Answer 1

我不确定原生 select 怎么可能做到这一点。但是，您可以处理 select 字段的更改并使用推送或 NextJS 使用的方法重定向

Answer 2

您不能在选项标签中使用 href 标签。您需要 javascript 才能这样做。

你为什么不阅读文档？ https://nextjs.org/docs/advanced-features/i18n-routing

或者你可以这样做：

  const router = useRouter();

  function handleChange(e){
    router.push(`/${e.target.value}`)
  }

  return (
    <select name="lang" id="lang" onChange={handleChange}>
      <option value="fr">FR </option>
      <option value="en">EN </option>
    </select>
  );

Link Select 选项与 React

Link options on Select with React

url

internationalization

i18next

reactjs