Change only one route param

Question

Let's say I have a Route with three params, like so:

<Route path="inbox/:filter/:middleFilter/:endFilter" component={Inbox}/>

Is there any way for me to just update one of those params at a time? For example, if the current URL is:

/inbox/asdf/1234/qwer

and I want to change the numbers 1234 (middleFilter), is there any React Router way of updating it? Something along the lines of:

history.push({
  params: {
    middleFilter: 6789
  }
})

Answer 1

The only solution I can think of is to read this.props.params, see what the current params are, rebuild the URL and push:

const { filter, endFilter } = this.props.params;
const middleFilter = 6789;

history.push(`/inbox/${filter}/${middleFilter}/${endFilter}`)

I'm not too keen on this solution though because I need to know what the URL looks like and all the available filters, but it works.