Question

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

我的模式（假设是一些国家/地区过滤器）应如下所示：pattern: '/country/:countryname/而不是?country="{countryname}"

这就是我的实现方式：

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

Answer 1

默认情况下，URLParams将基于查询参数（通过在URL中查找匹配的componentId）来设置组件的值。但是，在使用自定义网址时，默认的URLParams无法使用，因为它无法确定将哪个值传递给组件。

在这种情况下，您可以使用defaultSelected道具来初始化从URL读取的组件值。如果是next-routes，则可以从slug中选择query，然后将所需的值传递给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道具docs选择值时，您还可以更新url：

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

具有下一条路线的Reactsearch的URLParams

1 个答案: