当前位置：首页 > React

react如何过去路由信息

2026-01-25 11:14:34React

获取当前路由信息

在React中获取当前路由信息通常依赖于路由库。React Router是最常用的路由解决方案，提供多种方式访问路由数据。

使用useLocation钩子

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

function Component() {
  const location = useLocation();
  console.log(location.pathname); // 当前路径
  console.log(location.search);   // 查询参数
  console.log(location.hash);     // hash值
  console.log(location.state);    // 路由状态对象
}

使用useParams获取动态参数

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

function UserPage() {
  const params = useParams();
  console.log(params.id); // 获取如/user/:id中的id值
}

获取路由匹配信息

使用useMatch钩子

react如何过去路由信息

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

function Component() {
  const match = useMatch('/users/:id');
  console.log(match?.params.id); // 匹配到的动态参数
}

类组件中获取路由

对于类组件，可以使用高阶组件withRouter（React Router v5及以下）：

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

class MyComponent extends React.Component {
  componentDidMount() {
    console.log(this.props.location);
    console.log(this.props.match);
  }
}

export default withRouter(MyComponent);

获取路由历史对象

使用useNavigate钩子（React Router v6）

react如何过去路由信息

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

function Component() {
  const navigate = useNavigate();
  // 可以编程式导航并传递状态
  navigate('/new-path', { state: { data: 123 } });
}

获取查询参数

手动解析URLSearchParams

const query = new URLSearchParams(location.search);
const page = query.get('page'); // 获取?page=123中的123

使用第三方库如query-string

import queryString from 'query-string';

const parsed = queryString.parse(location.search);
console.log(parsed.page);

路由上下文访问

在深层子组件中，可以通过React Router的上下文直接访问：

import { useContext } from 'react';
import { __RouterContext } from 'react-router-dom';

function DeepChild() {
  const { location, match } = useContext(__RouterContext);
  // 使用路由数据
}

注意：React Router v6主要推荐使用钩子API，v5及以下版本兼容类组件方式。实际使用时需根据项目使用的路由版本选择对应方法。