利用 React Router 在 Hooks + TS 中实现页面跳转

2024-02-18 12:37:21

前言

在上一篇文章中，我们已经完成了项目主页上的项目列表的展示部分，并且在项目列表中实现了点击项目进入项目详情页面的功能。

点击某一项后，页面上的路径变成了

http://localhost:3000/projects/1

从上述路径上可以看到，路由发生了跳转，同时请求路径也发生了变化。

在这一篇文章里，我们会使用到React Router中的 useHistory hook来实现页面的跳转。

useHistory hook

useHistory hook允许我们访问并修改浏览器的历史记录。它是一个 React Router 内置的 hook，可以用来在组件中访问历史记录对象。

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

实现页面跳转

引入 useHistory hook

在需要实现页面跳转的组件中，引入 useHistory hook。

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

在组件中使用 useHistory hook

在组件中使用 useHistory hook来获取历史记录对象。

const history = useHistory();

使用 history.push() 方法进行页面跳转

使用 history.push() 方法来进行页面跳转。history.push() 方法接收一个路径作为参数，用于跳转到指定的页面。

history.push("/projects/1");

代码示例

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

const ProjectList = () => {
  const history = useHistory();

  const handleClick = (id) => {
    history.push(`/projects/${id}`);
  };

  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id} onClick={() => handleClick(project.id)}>
          {project.name}
        </li>
      ))}
    </ul>
  );
};