当前位置：首页 > React

react如何获取路由

2026-03-30 20:44:01React

获取当前路由路径

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

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

function MyComponent() {
  const location = useLocation();
  console.log(location.pathname); // 输出当前路由路径
  return <div>Current path: {location.pathname}</div>;
}

获取路由参数

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

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

function UserProfile() {
  const params = useParams();
  console.log(params.id); // 获取动态路由中的id参数
  return <div>User ID: {params.id}</div>;
}

获取查询参数

获取URL中的查询参数（如?name=test）可以通过解析location.search实现。推荐使用URLSearchParamsAPI或第三方库如query-string。

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

function SearchPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const name = queryParams.get('name');
  return <div>Search name: {name}</div>;
}

编程式导航

使用useNavigate钩子可以获取导航函数，用于编程式路由跳转。navigate函数支持路径字符串或配置对象形式。

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

function NavigateButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/new-path')}>
      Go to new path
    </button>
  );
}

获取路由匹配信息

useMatch钩子可以检查当前URL是否匹配给定路径模式。返回匹配信息对象或null。

react如何获取路由

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

function CheckRoute() {
  const match = useMatch('/dashboard/*');
  return match ? <div>Dashboard route</div> : <div>Other route</div>;
}