Question

I am using react-router s built in function generatePath to generate a URL. The issue is that as far as I understand this function just returns the path and doesn t provide a mechanism for us to know which fields were added in the path and which were not.

例如,以下法典:

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

the function returns /user/1 which is correct, but there is no way for us to know that only id was inserted into the path and name needs to be passed as query parameters.
In my application both the path template and the params object are dynamic and I need to add the extra fields in params as the query parameters.
Is there any way to do that ?

Answer 1

对于现在检查的人,我最后使用了<代码>path-to-regexp的图书馆,这是反应堆内部用来生成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;
};

友情链接