ReactJS中如何拆分URL并提取指定参数值？

如果你的URL是/login?redirect=shipping，要拿到shipping这个参数值，在React里有两种常用方式：

方法一：用原生浏览器API（通用场景） #

不需要依赖任何路由库，直接用浏览器自带的URLSearchParams就能搞定：

// 拿到当前页面的完整URL
const currentUrl = window.location.href;
// 解析URL里的查询参数部分
const searchParams = new URLSearchParams(new URL(currentUrl).search);
// 获取redirect参数对应的值
const redirectTarget = searchParams.get('redirect');
console.log(redirectTarget); // 输出 "shipping"

方法二：用React Router的钩子（路由项目专属） #

如果你的项目用了React Router v6及以上版本，可以用官方提供的useSearchParams钩子，更贴合React组件开发的逻辑：

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

function LoginPage() {
  const [searchParams] = useSearchParams();
  // 直接获取redirect参数的值
  const redirectTarget = searchParams.get('redirect');

  return <div>即将跳转到: {redirectTarget}</div>;
}

两种方法都能精准拿到shipping，选哪种看你的项目有没有用React Router就行。

内容的提问来源于stack exchange，提问作者Ujwal Gaonkar