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上的参数使用了这个：

URLSearchParams MDN

我看有些项目使用的是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 都是一个非常实用的工具。