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

Question

有没有人知道如何处理一些响应式搜索组件的 URLParams 的 url 写入next-routes？

我的模式，比方说一些国家过滤器，应该是这样的：pattern: '/country/:countryname/而不是?country="{countryname}"

这就是我实现它的方式：

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

Answer 1

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

在这种情况下，您可以使用defaultSelectedprop 来初始化从 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
      />
    ...
  );
}

您还可以在使用onValueChangeprop docs选择值时更新 url ：

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