React Router-如何动态替换字符串中的参数

Question

我在URL中有一组动态参数，例如用户区域设置，如下所示：

/en/homepage

在我的路由器配置JSON文件中，我有类似以下内容：

/:locale/homepage

哪种方法可以直接在React Router中直接替换这些参数？

我想出了一个与标准或便携式解决方案相距甚远的解决方案：

const urlTemplate = '/:language/homepage';
const mappedUrl = pathToRegexp.compile(urlTemplate);
const url = mappedUrl({
  'language': this.props.match.params.language
})
this.props.history.push(url);

我能够检索匹配参数，如果该部件是由withRouter（从阵营路由器HOC）包裹，并用pathToRegexp（pillarjs /路径对正则表达式）取代他们，但如果我需要使用<Link to={}>一个无状态的组件真是太讨厌了。

是否有标准解决方案可以做到这一点？

先感谢您 ：）

Answer 1

当用户更改Leaflet映射视图时，我使用了React Router generatePath来更新路径/map/:zoom/:lon/:lat/。请注意，在我的情况下，我替换了路径而不是推送路径。

import { generatePath } from 'react-router';

function updatePath(lat, lon, zoom) {
  const path = generatePath(this.props.match.path, { lat, lon, zoom });
  this.props.history.replace(path);
}

Answer 2

好吧，不确定您是否仍然对答案感兴趣，也不确定我的答案是否会对您有所帮助，但是......

如果您的路径很简单，例如您的示例（我的意思是，它们不包含正则表达式，例如/:locale/kappa([a-z]{2})），您可以编写这个独立于路由器的函数，您可以在其中手动处理路径并替换参数:)

function placeParams(pathRegex, params) {
  var segments = pathRegex.split("/")
  return segments.map(segment => {
    var offset = segment.indexOf(":") + 1
    if (!offset)
      return segment

    var key = segment.slice(offset)
    return params[key]
  }).join("/")
}

console.log(placeParams("/:locale/kappa", { locale: "en" }))