Question

我希望能够创建指向我所在路径的链接，除了某些参数的更改。

在我的网站上，我决定使用这样的网址：/list/:page(\d+)?/:filter?。现在，在我的组件中，我可以访问match（使用withRouter HOC）。在我的情况下它包含

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

这是非常好的，因为我有两个参数和路径。现在，这提出了两个问题：

是否存在针对这种情况的react-router内置解决方案？
如果没有，是否有可能使用path-to-regexp的解决方案，或者我应该使用天真的搜索和替换？

谢谢

Answer 1

当然，在发布问题后会立即显示解决方案。

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"

React-router：更改网址

1 个答案: