如何在React JSX的xyz.jsx文件中获取当前页面URL并进行值匹配

嘿，我来帮你搞定这个在xyz.jsx里判断URL匹配的需求！下面是几种简单直接的实现方式，完美适配你的场景：

1. 基础通用方式：使用浏览器原生window.location #

这是最不需要依赖的方法，适合所有React项目，不管有没有用路由库：

// 在你的xyz.jsx组件中定义匹配函数
const checkUrlMatch = (targetString) => {
  // 获取当前页面的完整URL
  const currentUrl = window.location.href;
  // 判断URL是否包含目标字符串，直接返回布尔值
  return currentUrl.includes(targetString);
};

// 按照你的场景测试：URL是www.testreact.reactadmin.com/abc/23，匹配"admin"
const isMatched = checkUrlMatch('admin'); // 这里会返回true

如果你的需求是只匹配域名部分（避免路径里的相似字符串被误判），可以改用window.location.hostname：

const checkUrlMatch = (targetString) => {
  const currentHostname = window.location.hostname; // 这里会得到"www.testreact.reactadmin.com"
  return currentHostname.includes(targetString);
};

2. 正则表达式实现精准匹配 #

如果需要更严格的匹配规则（比如区分大小写、匹配完整单词等），正则表达式会更灵活：

const checkUrlMatch = (targetString, caseSensitive = false) => {
  const regexFlags = caseSensitive ? '' : 'i'; // 'i'表示不区分大小写
  const regex = new RegExp(targetString, regexFlags);
  return regex.test(window.location.href);
};

// 使用示例：区分大小写匹配"Admin"
const isMatched = checkUrlMatch('Admin', true); // 你的示例URL会返回false

3. React Router项目专属方案 #

如果你的项目用了React Router，用useLocation钩子来获取路由信息会更符合组件化思维：

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

const YourComponent = () => {
  const location = useLocation();

  const checkUrlMatch = (targetString) => {
    // 可以同时检查路径和域名，按需调整
    return location.pathname.includes(targetString) || location.hostname.includes(targetString);
  };

  const isMatched = checkUrlMatch('admin');

  return (
    <div>
      {/* 你的组件内容 */}
      匹配结果：{isMatched ? '匹配成功' : '匹配失败'}
    </div>
  );
};

export default YourComponent;

这些方法都能轻松实现你要的需求，根据你的项目情况选合适的就行~

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