添加多个查询参数react路由器浏览器历史记录

添加多个查询参数是指在使用React路由器时，可以通过URL中的查询字符串来传递多个参数。查询参数是URL中的一部分，用于向服务器发送额外的信息或者在前端页面之间传递数据。

在React路由器中，可以使用react-router-dom库来实现路由功能。要添加多个查询参数，可以使用<Link>组件或者编程式导航来生成包含查询参数的URL。

使用<Link>组件添加多个查询参数：

import { Link } from 'react-router-dom';

const MyComponent = () => {
  return (
    <Link
      to={{
        pathname: '/my-route',
        search: '?param1=value1&param2=value2&param3=value3',
      }}
    >
      Go to My Route
    </Link>
  );
};

上述代码中，pathname表示目标路由的路径，search表示查询参数部分，通过?符号开始，多个参数之间使用&符号分隔。

使用编程式导航添加多个查询参数：

import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    const queryParams = new URLSearchParams();
    queryParams.append('param1', 'value1');
    queryParams.append('param2', 'value2');
    queryParams.append('param3', 'value3');

    history.push(`/my-route?${queryParams.toString()}`);
  };

  return (
    <button onClick={handleClick}>Go to My Route</button>
  );
};

上述代码中，通过URLSearchParams对象来构建查询参数，使用append方法添加参数和值，然后通过toString方法将其转换为字符串，并将其添加到目标URL中。

添加多个查询参数的优势是可以在URL中传递多个参数，方便在不同页面之间传递数据或者向服务器发送额外的信息。应用场景包括但不限于：