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

【问题标题】：React Router - How to replace dynamically parameters in a stringReact Router - 如何动态替换字符串中的参数
【发布时间】：2018-06-05 07:39:52
【问题描述】：

我在 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={}> 在无状态组件中很烦人。

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

提前谢谢你:)

【问题讨论】：

如果组件没有接收到Router props，则需要使用withRouter，其他可能的解决方案是将所有props传递给子组件
@ShubhamKhatri 谢谢你的回答。问题是如果嵌套的无状态组件有长尾，它会变得有点复杂:)
如果你有很多嵌套的无状态组件，你可能有兴趣了解 React Context Api reactjs.org/blog/2018/03/29/…
如果你有很多嵌套的无状态组件，你可能有兴趣了解 [React Context Api][1] [1]w: reactjs.org/blog/2018/03/29/…
@AnnamariaL 是否有任何答案可以帮助您解决问题？您需要更多替代方案来解决您的问题吗？

标签： javascript reactjs react-router react-router-v4

【解决方案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);
}

【讨论】：

唯一正确的答案，恕我直言，因为它不提供任何“自行车”，并且显示了在 ReactRouter 4+ 中使用路由的本机方法

【解决方案2】：

我使用了一个函数，它将路由路径的参数替换为使用正则表达式的函数的参数。

如果路线是：

'/:language/homepage'

函数将用传递给函数的参数替换:language。

功能

这是替换路径中值的函数：

function getRoute(path) {
    let args = Array.prototype.slice.call(arguments, 1);
    let count = -1;
    return path.replace(/:[a-zA-Z?]+/g, function (match) {
        count += 1;
        return args[count] !== undefined ? args[count] : match;
    });
};

这里的关键是正则表达式/:[a-zA-Z?]+/g，它只匹配以:开头并包含a-z和A-Z之间的任何字符的字符串，这意味着当找到下一个/时，它将完成匹配，因此它将替换所有像这样定义的参数。

这适用于我对简单参数的特定用法，但如果您需要向匹配的正则表达式添加更多字符，您可以这样做（如数字、下划线等）。

用法

它是这样使用的：

let newPath = getRoute('/:language/homepage', 'en');

结果将是：

'/en/homepage'

链接示例

它可以像这样用于Links：

<Link to={ getRoute('/:language/homepage', 'en') }>

rout中的多个参数e

它也接受多个参数：

getRoute('/:id/:language/homepage/:value', 123, 'en', 'myVal')

这将返回：

'/123/en/homepage/myVal'

【讨论】：

【解决方案3】：

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

如果您的路径很简单，例如您的示例（我的意思是，它们不包含正则表达式，例如 /: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" }))

【讨论】：