React Router v6 的钩子

2023-10-14 06:57:02

React Router v6 的路由钩子

React Router v6 引入了钩子，允许开发人员在函数式组件中访问路由信息。与类式组件的传统道具方法相比，钩子提供了一种更简单、更灵活的方式来管理路由状态。

useRouter钩子

useRouter 钩子是路由钩子的基础。它提供了对当前路由信息的对象的访问，包括 params、location 和 history 属性。

import { useRouter } from "react-router-dom";

const MyComponent = () => {
  const router = useRouter();

  // 获取当前路由参数
  const params = router.params;

  // 获取当前路由位置
  const location = router.location;

  // 获取历史记录对象
  const history = router.history;
};

useParams钩子

useParams 钩子用于访问当前路由的 URL 参数。

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

const MyComponent = () => {
  const params = useParams();

  // 获取特定参数
  const id = params.id;
};

useLocation钩子

useLocation 钩子返回当前路由的位置对象，它包含有关当前 URL、查询参数和哈希值的信息。

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

const MyComponent = () => {
  const location = useLocation();

  // 获取当前 URL
  const pathname = location.pathname;

  // 获取查询参数
  const search = location.search;

  // 获取哈希值
  const hash = location.hash;
};

useNavigation钩子

useNavigation 钩子提供了一个导航对象，用于以编程方式更改 URL 和导航到其他路由。

import { useNavigation } from "react-router-dom";

const MyComponent = () => {
  const navigation = useNavigation();

  // 导航到其他路由
  navigation.push("/my-route");

  // 使用相对路径导航
  navigation.relative("/my-route");

  // 使用哈希值导航
  navigation.push("#my-hash");
};