javascript - 如何链接到从下拉列表中选择项目的页面

Question

我正在为我的 Web 应用程序使用 react-select
我有一个带有自动填充功能的下拉菜单，当我点击输入时，我会看到来自 API 的所有汽车物品的列表，但我需要输入所需的物品并重定向到该详细信息页面。
我应该为此创建路线吗？
看一看:

当我单击 BMW 时，我需要转到 bmw 详细信息页面。
如果它只是简单的汽车项目，我会在下面创建一个按钮和链接

<Link  className='btn-item auction-btn mr-2' to={`/carDetails/${item.id}`}>Details</Link>.

带路由:

 <Route
            exact
            path="/carDetails/:id"
            render={({ match }) => (
              <CarDetails item={data.find((item) => String(item.id) === String(match.params.id))} />
            )}
          />

但这是 react-select 库，它是我必须过滤的组件，而不是转到我需要的那个页面。

Answer 1

你可以做history.push在 react-select 的更改处理程序中。一个例子:

export default function MyComponent() {
  const [value, setValue] = useState()
  const history = useHistory()

  function handleChange(newValue) {
    setValue(newValue)
    history.push(`/carDetails/${newValue.id}`)
  }

  return (
    <Select
      value={value}
      options={options}
      onChange={handleChange}
    />
  )
}