Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change a single parameter in URL

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:

  1. Is there a react-router builtin solution for such a situation?

  2. If not, is there a possible solution using path-to-regexp, or I should use naive search and replace?

like image 978
Misiur Avatar asked Jul 28 '17 23:07

Misiur


1 Answers

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"
like image 181
Misiur Avatar answered Sep 30 '22 07:09

Misiur