URLParams of reactivesearch with next-routes

Question

Does anyone have an idea on how to handle the url writing of URLParams of some reactivesearch component with next-routes?

My pattern for, let's say some country filter, should look like this: pattern: '/country/:countryname/ instead of ?country="{countryname}"

That's how I implement it:

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

score 2 · Answer 1 · answered Sep 01 '18 at 17:46

By default the URLParams will set the value of the components based on the query params (by looking for a matching componentId in the url). However, when using a custom url the default URLParams won't work because it can't figure out which value to pass to the component.

In such cases you may use the defaultSelected prop to initialize the component's value reading it from the URL. In case of next-routes, you could pick the slug from the query and pass the required value to the SingleDropdownList component:

render() {
  const defaultValue = this.props.url.query.slug; // or parse it to find the required value
  return (
    ...
      <SingleDropdownList
        ...
        defaultSelected={defaultValue}. // value from url
      />
    ...
  );
}

You can also update the url when a value is selected using the onValueChange prop docs:

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

URLParams of reactivesearch with next-routes

1 Answers1