当前位置：首页 > React

React如何获取地址栏信息

2026-01-26 01:56:38React

获取当前URL路径

使用window.location.pathname可以直接获取当前页面的路径部分。在React组件中，可以通过useEffect钩子监听路径变化：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const currentPath = window.location.pathname;
    console.log('Current path:', currentPath);
  }, []);
}

使用React Router的useLocation

如果项目使用了React Router v5或更高版本，可以通过useLocation钩子获取路由信息。这种方式更符合React的声明式编程风格：

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

function MyComponent() {
  const location = useLocation();
  console.log('Pathname:', location.pathname);
  console.log('Search params:', location.search);
}

解析查询参数

对于URL中的查询字符串（?key=value格式），可以使用URLSearchParamsAPI进行解析。结合React Router的useLocation：

const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const value = searchParams.get('key');

获取完整URL

需要获取包含协议、域名等完整URL时，直接使用window.location.href：

const fullUrl = window.location.href;

动态路由参数获取

使用React Router时，可以通过useParams获取动态路由参数。例如路由配置为/user/:id：

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

function UserPage() {
  const { id } = useParams();
  console.log('User ID:', id);
}

哈希值获取

获取URL中的哈希部分（#section）可以使用window.location.hash或React Router的useLocation：

const hash = window.location.hash;
// 或通过React Router
const location = useLocation();
const hash = location.hash;

服务端渲染场景

在Next.js等服务端渲染框架中，可以通过框架提供的路由钩子获取URL信息。例如Next.js的useRouter：

React如何获取地址栏信息

import { useRouter } from 'next/router';

function Component() {
  const router = useRouter();
  console.log('Path:', router.pathname);
  console.log('Query:', router.query);
}