如何在<select>标签内使用React Router？有无可行替代方案？

嘿，这个问题我之前踩过坑！直接在<option>里嵌套<Link>是行不通的，原因有两个：

1. 原生HTML规范里，<option>只能包含文本内容，嵌套像<Link>这样的组件会被浏览器忽略，所以<Link>的点击事件根本不会被触发；
2. <select>的原生选择行为会覆盖掉内部组件的交互逻辑，就算你硬嵌套了<Link>，也没法触发它的跳转功能。

下面给你两种可行的解决方案，都是利用React Router的history对象来实现跳转：

方案一：类组件（适配你的现有代码） #

首先你需要用withRouter高阶组件把你的组件包裹起来，这样组件就能获取到React Router的history对象。然后在handleCategories事件处理函数里，通过选中的值来触发路由跳转：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class YourComponent extends Component {
  // 假设你的state和其他逻辑已经存在
  state = {
    temp: ['category1', 'category2', 'category3']
  };

  handleCategories = (e) => {
    const selectedCategory = e.target.value;
    // 根据选中的分类跳转到对应路径
    this.props.history.push(`/${selectedCategory}`);
    // 如果需要保留原来的state更新逻辑，继续在这里添加
  };

  render() {
    return (
      <div className="col-lg-4">
        <select 
          id="categories" 
          onChange={this.handleCategories} 
          className="form-control"
        >
          {this.state.temp.map((i, index) => (
            <option key={index} value={i}>{i}</option>
          ))}
        </select>
      </div>
    );
  }
}

// 用withRouter包裹组件，注入history对象
export default withRouter(YourComponent);

方案二：函数组件（使用hooks） #

如果是函数组件，直接用useHistory钩子就能获取history对象，写法更简洁：

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function YourComponent() {
  const [temp] = useState(['category1', 'category2', 'category3']);
  const history = useHistory();

  const handleCategories = (e) => {
    const selectedCategory = e.target.value;
    history.push(`/${selectedCategory}`);
  };

  return (
    <div className="col-lg-4">
      <select 
        id="categories" 
        onChange={handleCategories} 
        className="form-control"
      >
        {temp.map((i, index) => (
          <option key={index} value={i}>{i}</option>
        ))}
      </select>
    </div>
  );
}

export default YourComponent;

补充说明 #

• 如果你需要根据不同的选项跳转到不同的自定义路径，只需要把<option>的value设置为对应的路径字符串，比如<option value="/custom-path">自定义分类</option>，然后在handleCategories里直接用history.push(selectedValue)即可；
• 这种方式完全符合HTML规范，同时也能完美结合React Router的路由功能。

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