react如何获取页面地址

获取当前页面地址的方法

在React中获取当前页面的URL地址可以通过window.location对象或React Router（如果项目使用了路由库）实现。

使用window.location获取完整URL：

const currentUrl = window.location.href;

获取路径部分（不含域名）：

const path = window.location.pathname;

使用React Router获取地址

如果项目使用React Router v5/v6，可以通过useLocation钩子获取路由信息：

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

function Component() {
  const location = useLocation();
  console.log(location.pathname); // 输出当前路径
}

获取查询参数

从URL中解析查询字符串可以使用URLSearchParams：

const queryParams = new URLSearchParams(window.location.search);
const paramValue = queryParams.get('paramName');

在React Router中获取查询参数：

const { search } = useLocation();
const queryParams = new URLSearchParams(search);

注意事项

• 在服务端渲染(SSR)场景下，直接访问window对象可能导致错误，需要先判断环境
• 动态路由参数需通过React Router的useParams钩子获取
• 哈希路由模式的URL需要通过window.location.hash获取锚点部分