当前位置：首页 > React

react如何获取路由

2026-01-15 08:54:46React

获取当前路由路径

在React中获取当前路由路径可以通过react-router-dom提供的useLocation钩子。useLocation返回一个包含当前路由信息的对象，其中pathname属性即为当前路径。

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

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

获取路由参数

对于动态路由（如/user/:id），可以通过useParams钩子获取参数。该钩子返回一个包含所有动态参数键值对的对象。

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

function UserProfile() {
  const params = useParams();
  console.log(params.id); // 若路径为 "/user/123"，输出 "123"
}

获取查询字符串

若需解析URL中的查询字符串（如?name=John&age=20），可使用useSearchParams钩子。它返回一个包含当前查询参数的对象和更新函数。

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

function SearchPage() {
  const [searchParams] = useSearchParams();
  console.log(searchParams.get('name')); // 输出 "John"
}

编程式导航

通过useNavigate钩子可以实现编程式路由跳转，并传递状态参数。navigate函数支持路径字符串或配置对象。

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

function NavigateButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/dashboard', { state: { from: 'home' } });
  };
}

类组件中的路由信息

在类组件中获取路由信息需使用高阶组件withRouter（v5及以下版本）或通过props传递路由属性。

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

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

export default withRouter(ClassComponent);

监听路由变化

通过useEffect结合useLocation可以监听路由变化并执行副作用操作。依赖项需包含location.pathname。

react如何获取路由

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

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

  useEffect(() => {
    console.log('Route changed to:', location.pathname);
  }, [location.pathname]);
}