Next.js：下拉菜单中的链接不起作用答案

【问题标题】：Next.js: Links inside dropdown menu not workingNext.js：下拉菜单中的链接不起作用
【发布时间】：2021-05-04 19:02:27
【问题描述】：

我正在尝试通过下拉菜单在 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>

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

【问题讨论】：

标签： reactjs drop-down-menu next.js next-router

【解决方案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>
        // ...
    )
}

【讨论】：