react如何获取浏览器地址

获取当前URL路径

使用window.location对象可以直接获取浏览器地址栏的完整URL。在React组件中可以通过window.location.href访问：

const currentUrl = window.location.href;

获取路径部分

如果只需要路径部分（不包含域名），可以使用window.location.pathname：

const currentPath = window.location.pathname;

使用React Router获取

在使用了React Router的项目中，可以通过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中可以使用useEffect监听路由变化：

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

function Component() {
  const location = useLocation();

  useEffect(() => {
    console.log('路由变化:', location.pathname);
  }, [location]);
}

服务器端渲染注意事项

在SSR环境下（如Next.js），window对象不存在，需要通过框架提供的路由钩子获取URL：

// Next.js示例
import { useRouter } from 'next/router';

function Page() {
  const router = useRouter();
  console.log(router.asPath); // 当前路径
}