如何在Next.js中通过下拉菜单实现页面路由？

你原来的写法存在问题：<option>标签里不能嵌套<Link>组件，浏览器不支持这种嵌套结构，所以选中Volvo选项不会触发页面跳转。下面是正确的实现方式：

实现步骤 #

• 导入Next.js客户端路由钩子useRouter（App Router环境）
• 给<select>添加onChange事件，监听选项切换
• 在事件处理函数中，根据选中的选项值执行页面跳转逻辑

完整代码 #

"use client"

import { useRouter } from 'next/navigation';

function Home() {
  const router = useRouter();

  const handleSelectChange = (e) => {
    const selectedValue = e.target.value;
    // 根据选中值跳转对应页面
    if (selectedValue === 'volvo') {
      router.push('/volvo');
    }
    // 如需给其他选项加跳转，可扩展以下逻辑
    // else if (selectedValue === 'saab') {
    //   router.push('/saab');
    // }
  }

  return (
    <main>
      <h1>Hello</h1>
      <select name="cars" id="cars" onChange={handleSelectChange}>
        <option value="saab">Saab</option>
        <option value="volvo">Volvo</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </main>
  )
}

export default Home;

代码说明 #

1. useRouter是Next.js客户端组件用于操作路由的核心钩子，调用router.push()即可完成页面跳转
2. handleSelectChange函数会在用户切换选项时触发，通过e.target.value获取当前选中的选项值
3. 若需要给其他车型选项也配置跳转，只需在handleSelectChange中添加对应的判断和router.push语句即可

内容的提问来源于stack exchange，提问作者Rayaan R