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

Posted 2023-02-22

【中文标题】带有下一个路由的响应式搜索的 URLParams

【英文标题】：URLParams of reactivesearch with next-routes

【发布时间】：2019-02-06 03:22:02

【问题描述】：

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

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

我就是这样实现的：

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

【参考方案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 属性 docs 选择值时更新 url：

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