具有下一路由的反应搜索的URLParams

问题描述 投票:2回答:1

有没有人知道如何使用next-routes处理某些反应搜索组件的URLParams的URL写入?

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

这就是我实现它的方式:

<SingleDropdownList
    componentId="country"
    dataField="locationInformation.country.name"
    URLParams
/>
reactjs routing next.js reactivesearch
1个回答
2
投票

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

在这种情况下,您可以使用defaultSelected prop初始化组件的值,从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 prop docs选择值时,您还可以更新网址:

<SingleDropdownList
  ...
  onValueChange={(value) => Router.push('country', { slug: value })}
/>
© www.soinside.com 2019 - 2024. All rights reserved.