Next.js：下拉菜单中的链接无效

Question

我正在尝试通过下拉菜单在 Next.js 中启用语言选择。如果链接没有嵌套在 select 标签内，它们就可以正常工作。不过，一旦他们反应过来，他们就不再回应了。我假设这是因为缺少事件处理程序，我认为解决方案可能相当简单，但我就是无法让它工作。

如果有人能看看这个就太好了。此外，我不是在寻找一种解决方案来通过三元运算符在两种语言之间切换，因为我想在未来使用两种以上语言的项目中使用该逻辑。坚持使用 select 标签对我来说也很重要，因为这对于选择语言最有意义并且提供更好的可访问性。

这是有效的 ✅

{router.locales.map((language) => (
  <Link
    href={router.asPath}
    locale={language}
    scroll={false}
    key={language}
  >
  <button type='button'>
    {language === 'en' ? 'EN' : language === 'de' ? 'DE' : null}
  </button>
  </Link>
))}

这是行不通的 ❌

<select name='languages' id='language-select'>
  {router.locales.map((language) => (
    <Link
      href={router.asPath}
      locale={language}
      scroll={false}
      key={language}
    >
      <option value={language}>
        {language === 'en'
          ? 'EN'
          : language === 'de'
          ? 'DE'
          : null}
      </option>
    </Link>
  ))}
</select>

非常感谢您花时间阅读本文并试图帮助我，我真的很感激！

Answer 1

如果您绝对需要坚持使用 select，而不是依赖 next/link，您应该监听 select 的 onChange 事件并触发路线更改用 next/router 代替。

const SomePage = () => {
    const router = useRouter()

    const onSelectChange = (e) => {
        const locale = e.target.value;
        router.push(router.asPath, router.asPath, {
            locale,
            scroll: false 
        })
    }

    return (
        // ...
        <select name="languages" id="language-select" onChange={onSelectChange}>
            {router.locales.map((language) => (
                <option value={language}>
                    {language === "en" ? "EN" : language === "de" ? "DE" : null}
                </option>
            ))}
        </select>
        // ...
    )
}

Next.js：下拉菜单中的链接无效

Next.js: Links inside dropdown menu not working

drop-down-menu

reactjs

next.js

next-router