umi中的路由跳转
在 UmiJS 项目中,路由的带参跳转和参数接收可以通过 history
对象来实现。Umi 使用了 history
库来处理前端路由。以下是如何进行带参跳转以及如何在目标页面接收这些参数。
带参跳转
你可以使用 history.push
或 history.replace
方法来进行带参数的跳转。这里以 history.push
为例:
import { history } from 'umi';
// 假设我们要跳转到 /user 并传递 id 和 name 参数
const userId = 123;
const userName = 'John Doe';
history.push({
pathname: '/user',
search: `?id=${userId}&name=${userName}`, // URL 查询字符串
state: { detail: 'some detail' }, // 可选的状态对象,可以用于传递额外的数据
});
这里的 search
是查询字符串的形式,会附加到 URL 后面。state
是一个可选的对象,它不会出现在 URL 中,但是可以在目标页面通过 location.state
获取到。
接受参数
在目标页面,你可以通过 useLocation
钩子(来自 @umijs/hooks
)或者直接从 props
中获取到这些参数。如果你使用的是类组件,则可以从 this.props.location
获取。
import React from 'react';
import { useLocation } from 'umi';
const UserPage = () => {
const location = useLocation();
// 从 URL 的查询字符串中解析参数
const searchParams = new URLSearchParams(location.search);
const id = searchParams.get('id');
const name = searchParams.get('name');
// 获取通过 state 传递过来的数据
const detail = location.state?.detail;
return (
<div>
<h1>User ID: {id}</h1>
<p>Name: {name}</p>
<p>Detail: {detail}</p>
</div>
);
};
export default UserPage;
这里处理url上的参数使用了这个:
我看有些项目使用的是query-string工具
query-string
是一个用于解析和字符串化 URL 查询参数的库。它可以帮助你轻松地处理 URL 中的查询字符串部分,比如 ?key1=value1&key2=value2
。这个库在 Node.js 和浏览器环境中都可以使用。
首先,你需要安装 query-string
库。如果你还没有安装,可以通过 npm 或 yarn 来安装:
Bash
深色版本
npm install query-string
# 或者
yarn add query-string
接下来是如何使用 query-string
的基本示例:
解析查询字符串
假设你有一个包含查询字符串的 URL,你可以使用 parse
方法来解析这些参数:
import queryString from 'query-string';
// 假设这是你的URL中的查询字符串
const url = 'http://example.com/?name=John&age=30&city=New%20York';
const parsed = queryString.parse(url);
console.log(parsed);
// 输出: { name: 'John', age: '30', city: 'New York' }
注意,queryString.parse
也可以直接接受查询字符串作为参数,而不需要整个 URL:
const search = '?name=John&age=30&city=New%20York';
const parsed = queryString.parse(search);
console.log(parsed);
// 输出: { name: 'John', age: '30', city: 'New York' }
字符串化查询对象
如果你想将一个 JavaScript 对象转换成查询字符串格式,可以使用 stringify
方法:
import queryString from 'query-string';
const params = {
name: 'John',
age: 30,
city: 'New York'
};
const stringified = queryString.stringify(params);
console.log(stringified);
// 输出: 'name=John&age=30&city=New%20York'
处理数组和嵌套对象
query-string
还支持处理更复杂的数据结构,例如数组和嵌套对象:
数组
const paramsWithArray = {
tags: ['node', 'react'],
user: 'jane'
};
const stringifiedWithArray = queryString.stringify(paramsWithArray, { arrayFormat: 'bracket' });
// 输出: 'tags[]=node&tags[]=react&user=jane'
const parsedFromArray = queryString.parse(stringifiedWithArray, { parseArrays: true });
// 输出: { tags: [ 'node', 'react' ], user: 'jane' }
嵌套对象
const paramsWithNestedObject = {
user: {
name: 'Jane',
age: 28
},
role: 'admin'
};
const stringifiedWithNestedObject = queryString.stringify(paramsWithNestedObject);
// 输出: 'user[name]=Jane&user[age]=28&role=admin'
const parsedFromNestedObject = queryString.parse(stringifiedWithNestedObject);
// 输出: { user: { name: 'Jane', age: '28' }, role: 'admin' }
通过以上方法,你可以方便地处理 URL 中的查询字符串。无论是从 URL 中提取数据还是构建带有查询参数的新 URL,query-string
都是一个非常实用的工具。
原文地址:https://blog.csdn.net/m0_47999208/article/details/142755492
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!