react如何获取路由

获取当前路由路径

使用react-router-dom的useLocation钩子可以获取当前路由信息。引入后调用该钩子，返回的对象中包含pathname属性即为当前路径。

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

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

获取路由参数

对于动态路由如/user/:id，使用useParams钩子提取参数。该钩子返回一个对象，键名对应路由配置中的参数名。

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

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

获取查询字符串

通过useLocation的search属性获取查询字符串，需配合URLSearchParams进行解析。

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

function SearchPage() {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const keyword = query.get('q'); // 获取?q=xxx中的值
}

编程式导航

使用useNavigate钩子进行路由跳转，可传递路径字符串或配置对象。第二参数可设置replace或state等选项。

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

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

  const handleClick = () => {
    navigate('/profile', { state: { fromHome: true } });
  };
}

获取路由状态

通过useLocation的state属性可获取导航时传递的状态对象。适用于页面间传递临时数据。

function ProfilePage() {
  const location = useLocation();
  const stateData = location.state?.fromHome; // 获取跳转时传递的state
}