如何在ReactJS/NextJS或JavaScript中拆分URL获取查询参数部分

注意：如果你的URL是HTML转义后的格式（&被转义为&），请先做转义还原再处理：

const escapedUrl = '/search-results?query=home+floor&categories=All+Categories';
const rawUrl = escapedUrl.replaceAll('&', '&');

原生JavaScript实现 #

字符串直接拆分（仅需拆分路径和参数时用） #

const fullUrl = '/search-results?query=home+floor&categories=All+Categories';
// 第二个参数2表示最多分割为2段，避免参数中包含?时拆分错误
const [pathPart, queryPart] = fullUrl.split('?', 2);

console.log(pathPart); // 输出：/search-results
console.log(queryPart); // 输出：query=home+floor&categories=All+Categories

标准Web API实现（需要后续解析参数时用） #

// 相对路径场景
const fullUrl = '/search-results?query=home+floor&categories=All+Categories';
// 拼接当前域名构造完整URL对象，也可以直接用window.location.href获取当前页面完整地址
const urlObj = new URL(fullUrl, window.location.origin);

const pathPart = urlObj.pathname; // 路径部分
const queryPart = urlObj.search.slice(1); // 去掉search开头的?得到参数串

// 可以直接获取解析后的单个参数
const query = urlObj.searchParams.get('query'); // 输出：home floor
const categories = urlObj.searchParams.get('categories'); // 输出：All Categories

NextJS 实现 #

Pages Router 场景 #

import { useRouter } from 'next/router';

function SearchComponent() {
  const router = useRouter();
  const pathPart = router.pathname; // /search-results
  const queryPart = router.asPath.split('?', 2)[1] || ''; // 参数字符串
  
  // 也可以直接拿框架解析好的参数对象
  const { query, categories } = router.query;
  return <></>;
}

App Router 场景 #

客户端组件

'use client';
import { usePathname, useSearchParams } from 'next/navigation';

function SearchComponent() {
  const pathPart = usePathname(); // /search-results
  const searchParams = useSearchParams();
  const queryPart = searchParams.toString(); // 参数字符串

  // 获取单个参数
  const query = searchParams.get('query');
  return <></>;
}

服务端组件

// app/search-results/page.js
export default function SearchPage({ searchParams }) {
  // searchParams为框架解析好的参数对象
  const queryPart = new URLSearchParams(searchParams).toString(); // 转成参数字符串
  const { query, categories } = searchParams;
  return <></>;
}

React + React Router 项目实现 #

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

function SearchComponent() {
  const location = useLocation();
  const pathPart = location.pathname; // /search-results
  const queryPart = location.search.slice(1); // 参数字符串

  // 也可以直接拿解析好的参数
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  return <></>;
}

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