如何用select和option渲染列表并跳转至对应ID？遇Link嵌套问题

原生HTML规范中，<select>的直接子元素仅允许是<option>或<optgroup>，嵌套<Link>这类组件会破坏select的DOM结构，导致浏览器无法正确解析，因此框架会抛出错误。

解决方案 #

通过监听select的onChange事件，手动触发路由跳转，替代直接嵌套Link的方式，具体实现如下：

• 移除select内的Link组件，保留标准的select和option结构
• 使用路由提供的导航方法（如React Router的useNavigate），在选项变更时跳转至目标页面并传递参数

代码示例（React Router v6 为例） #

import { useNavigate } from 'react-router-dom';

function MovieSelector({ movies }) {
  const navigate = useNavigate();

  const handleSelectChange = (e) => {
    const selectedId = e.target.value;
    if (!selectedId) return;
    
    // 跳转到对应电影详情页，同时传递参数
    navigate(`/movies/${selectedId}`, {
      state: { 
        movieName: movies.find(m => m.id === selectedId)?.name
      }
    });
  };

  return (
    <>
      <label>Movies:</label>
      <select onChange={handleSelectChange}>
        <option value="">请选择一部电影</option>
        {movies.map(item => (
          <option key={item.id} value={item.id}>
            {item.name}
          </option>
        ))}
      </select>
    </>
  );
}

补充说明 #

• 若使用类组件，可通过withRouter高阶组件注入history属性，调用history.push()实现跳转
• 跳转时的参数可通过state传递，在目标页面通过useLocation()获取
• 这种方式完全符合HTML规范，同时能实现和Link一致的路由跳转效果

内容的提问来源于stack exchange，提问作者mohammed saif dinar