React开发：无法从当前URL解析参数，如何解决？

一、原生JavaScript方案（无需依赖） #

不用额外安装任何库，直接利用浏览器原生的URLSearchParams API就能轻松解析参数，兼容性覆盖绝大多数现代浏览器：

// 从当前URL的查询串中提取参数
const searchParams = new URLSearchParams(window.location.search);

// 获取单个参数值
const urlParam = searchParams.get('url');
const emailParam = searchParams.get('email');

console.log(urlParam); // 输出 "xyz"
console.log(emailParam); // 输出 "xyz"

如果需要把所有参数转成对象方便统一使用：

const paramsObj = Object.fromEntries(searchParams);
console.log(paramsObj); // 输出 { url: 'xyz', email: 'xyz' }

二、React Router方案（主流单页应用路由工具） #

如果你的React项目使用了React Router（以当前稳定的v6版本为例），可以用官方提供的useSearchParams钩子，更贴合React组件的生命周期：

1. 先确保已安装依赖：

npm install react-router-dom

2. 在组件中使用钩子获取参数：

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

function YourComponent() {
  // useSearchParams返回数组，第一个是参数对象，第二个是修改参数的方法
  const [searchParams] = useSearchParams();

  const urlParam = searchParams.get('url');
  const emailParam = searchParams.get('email');

  return (
    <div>
      <p>URL参数：{urlParam}</p>
      <p>Email参数：{emailParam}</p>
    </div>
  );
}

如果是React Router v5版本，可结合useLocation钩子使用：

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

function YourComponent() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const urlParam = params.get('url');
  // 后续逻辑同上
}

内容的提问来源于stack exchange，提问作者Vishal Kumar