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（来自 React 路由器的 HOC）包装并将它们替换为 pathToRegexp（🐾 pillarjs/path-to-regexp），我能够检索匹配参数，但如果我需要使用 <Link to={}> 在无状态组件中，这非常烦人。

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

先感谢您 ：）

原文由 AnnamariaL 发布，翻译遵循 CC BY-SA 4.0 许可协议

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);
}

原文由 Leila Hadj-Chikh 发布，翻译遵循 CC BY-SA 4.0 许可协议