javascript - 使用 react-router v6 和 useNavigate 动态生成查询参数
问题描述
我试图弄清楚如何使用useNavigate
钩子导航/重定向用户并更新查询参数(如果有的话)。
我创建了一个自定义useNavigateParams
钩子,我已经从几个不同的 SO 答案中改编了它,它看起来像这样:
import { generatePath, ParamKeyValuePair, useNavigate } from 'react-router-dom';
import { getSearchParams, isObjectEmpty } from 'src/utils';
type TUseNavigateParams = {
uri: string;
params?: Record<string, unknown>;
};
export default function useNavigateParams() {
const navigate = useNavigate();
return ({ uri, params = {} }: TUseNavigateParams) => {
let path = uri;
if (!isObjectEmpty(params)) {
path += generatePath('?:queryString', {
uri,
queryString: getSearchParams(Object.entries(params) as ParamKeyValuePair[]),
});
}
console.log('decoded', decodeURIComponent(path));
navigate(path);
};
}
const getSearchParams = (params: ParamKeyValuePair[]) => {
let searchParams = '';
params.forEach((param, index) => {
const localDestructured = Object.entries(param[1]);
console.log('localDestructured', localDestructured);
searchParams += createSearchParams({
[param[0]]: JSON.stringify({ [localDestructured[0][0]]: localDestructured[0][1] }),
});
});
return createSearchParams(searchParams).toString();
};
这里的想法是我基本上会useNavigateParams
在整个项目中使用,而不是useNavigate
.
我的问题如下。像下面这样简单的东西可以正常工作:
const uri = 'myPath'
const filter = 'active'
const params = { filter: { status: filter } }
navigate({
uri,
params,
})
这将打印,
myPath?filter={"status":"active"}
但做类似的事情,
const uri = 'myPath'
const filter = 'active'
const params = { filter: { status: filter, hello: 'world' } }
navigate({
uri,
params,
})
不会打印,
myPath?filter={"status":"active", "hello":"world"}
我知道我可以添加另一种forEach
方法或找出一些 hacky 方法,但它看起来如此庞大,而且它实际上绝不是可重用/动态的。
我希望能够传递某种参数,例如,
const uri = 'myPath'
const filter = 'active'
const params = { filter: { status: filter, hello: 'world' }, foo: 'bar', baz: { node: 'leaf' } }
navigate({
uri,
params,
})
并期望输出为:
myPath?filter={"status":"active", "hello":"world"}&foo=bar&baz={"node":"leaf"}
是否有更清洁、更可靠的方法来实现这样的结果?
解决方案
我已经在使用axios
了,所以我最终使用了getUri
:
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
type TUseNavigateParams = {
uri: string;
params?: Record<string, unknown>;
};
export default function useNavigateParams() {
const navigate = useNavigate();
return ({ uri, params = {} }: TUseNavigateParams) => {
const path = axios.getUri({ url: uri, params });
navigate(path);
};
}
推荐阅读
- html - 如何解析 HTML 正文以获取表格数据?
- python - 将许多 .gz 文件加载到字典中时的内存问题
- php - 为在线仪表板存储大量 SQL 查询的安全方法?
- java - Dagger 不生成子组件创建方法
- amp-html - What "interactive components" can be used in an amp-story?
- python - SQLAlchemy 抛出表名的键错误。不知道为什么?请指导
- python - 寻找有关构建从通用文件解析器派生的 XML 解析器的技巧
- ios - dyld:库未加载:@rpath .. 原因:找不到图像
- google-sheets - 使用 Javascript 在 Google 电子表格中插入日期 (yyyy-MM-dd HH:mm:ss) 添加撇号
- javascript - 带有串口本机模块的电子