Question

我正在使用react-router的内置函数generatePath来生成URL。问题是，据我了解，此函数仅返回路径，而没有提供一种机制让我们知道在路径中添加了哪些字段，哪些没有添加。

例如，对于以下代码

generatePath('/user/:id', {
    id: 1,
    name: 'John',
})

该函数返回正确的/user/1，但是我们无法得知只有id插入了路径，并且需要将name作为查询参数进行传递。
在我的应用程序中，路径模板和params对象都是动态的，我需要在params中添加额外的字段作为查询参数。
有什么办法吗？

Answer 1

对于现在检查的任何人，我最终使用了 path-to-regexp 库，它是 react-router 内部用于生成 URL 的库。代码看起来像这样

import pathToRegexp from 'path-to-regexp';
import qs from 'qs';

const compiledCache = {};
export default function generatePathWithQueryParams(rawPath, params) {
    let toPath;
    if (compiledCache[rawPath]) {
        toPath = compiledCache[rawPath];
    } else {
        toPath = pathToRegexp.compile(rawPath);
        compiledCache[rawPath] = toPath;
    }
    const queryParams = { ...params };
    const path = toPath(params, {
        encode: (value, token) => {
            delete queryParams[token.name];
            return encodeURI(value);
        },
    });
    const queryString = qs.stringify(queryParams);
    if (queryString) {
        return `${path}?${queryString}`;
    }
    return path;
};

具有查询参数的react-router generatePath

1 个答案: