Change a single parameter in URL

Question

I want to be able to create a link to the same route I'm on, except for changes to some parameters.

In my website, I decided to have a URL structured like this: /list/:page(\d+)?/:filter?. Now, in my component I have access to match (using withRouter HOC). In my situation it contains

{
  isExact: true
  params: {page: "3", filter: "duckbitt"}
  path: "/listing/:page(\d+)?/:filter?"
  url: "/listing/3/duckbitt"
}

This is very good, as I have both params and the path. Now, this raises 2 questions:

Is there a react-router builtin solution for such a situation?
If not, is there a possible solution using path-to-regexp, or I should use naive search and replace?

Misiur · Accepted Answer · 2017-07-28 23:42:22Z

10

Of course a solution shows up right after posting the question.

import pathToRegexp from 'path-to-regexp';
// (...)
const toPath = pathToRegexp.compile(match.path);
const newPath = toPath({ ...match.params, page: 666 });
console.log(newPath); // "/listing/666/duckbitt"

answered Jul 28, 2017 at 23:42

Misiur

5,3938 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change a single parameter in URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related