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

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

/en/主页

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

/：区域设置/主页

在React路由器中直接替换这些参数的最佳方法是什么

我提出的解决方案与标准或便携式解决方案相去甚远：

consturltemplate='/:language/homepage'；
const mappedUrl=pathToRegexp.compile（urlTemplate）；
常量url=mappedUrl({
“语言”：this.props.match.params.language
})
this.props.history.push（url）好吧，我不确定你们是否仍然对答案感兴趣，也不确定我的答案是否对你们有帮助，但是

如果您的路径很简单，比如在您的示例中（我的意思是，它们不包括regexp，比如
/：locale/kappa（[a-z]{2}）
），那么您可以编写这个独立于路由器的函数，手动处理路径并替换参数：）


函数placeParams（pathRegex，params）{
var segments=pathRegex.split（“/”）
返回segments.map（segments=>{
变量偏移量=段索引（“：”）+1
如果（！偏移）
返回段
变量键=段.切片（偏移）
返回参数[键]
}).join（“/”）
}
log（placeParams（“/：locale/kappa”，{locale:“en”}））
我使用一个函数，用使用正则表达式的函数的参数替换路由路径的参数

如果路线是：

'/: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');

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

结果将是：

'/en/homepage'

链接示例

它可用于
链接
，如下所示：

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

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

这将返回：

'/123/en/homepage/myVal'

当用户更改传单地图视图时，我使用React路由器更新路径
/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);
}

如果组件未接收路由器道具，则需要使用withRouter，其他可能的解决方案是将所有道具传递给子组件component@ShubhamKhatri谢谢你的回答。问题是，如果有一长串嵌套的无状态组件，它会变得有点复杂：）如果有一长串嵌套的无状态组件，您可能有兴趣了解React-Context Api如果有一长串嵌套的无状态组件，您可能有兴趣了解[React-Context Api][1][1]w:@AnnamariaL这些答案对你的问题有帮助吗？你需要更多的选择来解决你的问题吗？唯一正确的答案是IMHO，因为它不提供任何“自行车”，并且显示了ReactRouter 4中处理路由的本地方法+