Question

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

/en/homepage

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

/:locale/homepage

在React Router中直接替换这些参数的最佳方法是什么？

我已经提出了这个解决方案，让我看起来离标准或便携式解决方案很远：

＆＃13;

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

＆＃13;

如果组件由withRouter（来自React路由器的HOC）包装，并且用pathToRegexp（pillarjs / path-to-regexp）替换它们，我能够检索匹配参数，但是如果我需要使用{{ 1}}在无状态组件中，它非常烦人。

为了做到这一点，是否有标准解决方案？

提前谢谢你：）

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

嗯，不确定你是否还有兴趣回答，也不确定我的回答对你有帮助，但......

如果您的路径很简单，例如在您的示例中（我的意思是，它们不包括正则表达式，例如function count() { console.log('var c=0') var c = 0; console.log('return function () { ... }') return function() { console.log('c += 1') c += 1; console.log('return c') return c; }; } console.log('var c1 = count()') var c1 = count(); console.log('c1()') console.log(c1()) console.log('c1()') console.log(c1())），您可以编写此路由器独立函数，您可以手动处理路径并替换参数：）

/:locale/kappa([a-z]{2})

Answer 3

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

如果路线是：

'/: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之间的任何字符，这意味着当下一个{{1 }}被发现，它将完成匹配，因此它将替换所有这样定义的参数。

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

用法

它的用法如下：

结果将是：

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

链接示例

它可用于'/en/homepage'，如下所示：

Links

溃败中的多个参数 e

它也接受多个参数：

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

这将返回：

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

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

3 个答案: