reactjs - 带有下一个路由的响应式(Reactive)搜索的 URLParams

Question

有人知道如何使用next-routes处理某些reactivesearch组件的URLParams的url写入吗？

我的模式(比如说某个国家/地区过滤器)应如下所示:pattern: '/country/:countryname/ 而不是 ?country="{countryname}"

这就是我的实现方式:

<SingleDropdownList
    componentId="country"
    dataField="locationInformation.country.name"
    URLParams
/>

Answer 1

默认情况下，URLParams 将根据查询参数设置组件的值(通过在 URL 中查找匹配的 componentId)。但是，当使用自定义 url 时，默认的 URLParams 将不起作用，因为它无法确定要传递给组件的值。

在这种情况下，您可以使用 defaultSelected 属性来初始化从 URL 读取的组件值。对于 next-routes，您可以从 query 中选择 slug 并将所需的值传递给 SingleDropdownList > 组件:

render() {
  const defaultValue = this.props.url.query.slug; // or parse it to find the required value
  return (
    ...
      <SingleDropdownList
        ...
        defaultSelected={defaultValue}. // value from url
      />
    ...
  );
}

您还可以在使用 onValueChange 属性选择值时更新 URL docs :

<SingleDropdownList
  ...
  onValueChange={(value) => Router.push('country', { slug: value })}
/>