如何解决Next.js:下拉菜单中的链接不起作用
我正在尝试通过下拉菜单在 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>
非常感谢您花时间阅读本文并尝试帮助我,我真的很感激! ?
解决方法
如果您绝对需要坚持使用 select
,而不是依赖于 next/link
,您应该监听 select
的 onChange
事件并使用 { 触发路线更改{1}} 代替。
next/router
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。