在 React 中选择不同的下拉选项时更改路由参数

Question

我的应用程序中有一个下拉菜单，我想要它以便当用户 select 从下拉菜单中选择不同的选项时，它应该更新 url。

例如，如果我有一个这样的 DropDown 组件：

class DropDown extends React.Component {
  render() {
    return (
      <select>
        <DropDownOption name="foo" />
        <DropDownOption name="bar" />
      </select>
    );
  }
}

还有一个 DropDownOption 这样的组件：

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

class DropDownOption extends React.Component {
render() {
    return (
      <option>
        <Link to={`/value=${this.props.name}`}>
        </Link>
      </option>
    );
  }
}

如果用户点击下拉菜单然后 selects 'foo'，url 将变为例如：“localhost:3000/value=foo”，当他们 select 'bar' 时，它会变为“localhost:3000/value=bar”

但是，这不起作用，因为 <option> 标签内部不能有 <a> 标签，但我希望使用 [=19] 中的 <Link> 来做到这一点=] 模块，因为我一直在其他地方使用它（例如按钮）来更改路由参数并且它工作正常。

有什么建议可以实现吗？

Answer 1

将 onChange 事件附加到 select 并在其中推送到路由器作为道具传递的 history 对象。

编辑：

这是一个例子 https://codesandbox.io/s/w031p82nr5

在 React 中选择不同的下拉选项时更改路由参数

Changing route parameters when a different dropdown option is selected in React

javascript

reactjs

react-router

react-router-dom