有没有人知道如何使用next-routes
处理某些反应搜索组件的URLParams的URL写入?
我的模式,比如说一些国家过滤器,应该是这样的:pattern: '/country/:countryname/
而不是?country="{countryname}"
这就是我实现它的方式:
<SingleDropdownList
componentId="country"
dataField="locationInformation.country.name"
URLParams
/>
默认情况下,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 })}
/>