React Router和history的解释适用于初学者

创建Web应用程序时，必须具备在不同页面间进行转换的功能。React Router是一个可用于React的路由库，用于管理此类页面转换操作。

本次将解释React Router中重要部分的history对象。

“React Router 是什么？”

React Router是一个用于单页应用程序(SPA)中实现页面之间跳转的库。在SPA中，通常通过部分更新(通常是替换组件)而不是重新加载整个页面来给用户一种存在多个页面的感觉。

历史是什么？

历史（history）是由React Router提供的一个对象，用于管理浏览器历史堆栈的状态。历史对象提供了用于进行页面跳转和返回上一页的方法。

history.push('/home'); //新しいエントリを履歴スタックに追加し、その位置に遷移します。
history.replace('/home'); //現在のエントリを新しいもので置き換え、その位置に遷移します。
history.goBack(); //履歴スタックの前のエントリに遷移します。
history.goForward(); //履歴スタックの次のエントリに遷移します。

历史的使用方法

在 React Router v5 中，我们可以通过使用 withRouter 高阶组件 (HOC) 来访问 history 对象。但在 React Router v6 中，这种方法已被废弃，取而代之的是使用 useHistory 钩子。

例：React Router v5 简约的编写风格使得在 React 应用中实现动态路由变得更简单更容易。

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

function MyComponent({ history }) {
  const navigateToHome = () => {
    history.push('/home');
  };

  return (
    <button onClick={navigateToHome}>
      Go to Home
    </button>
  );
}

export default withRouter(MyComponent);

React Router v6的版本

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

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

  const navigateToHome = () => {
    navigate('/home');
  };

  return (
    <button onClick={navigateToHome}>
      Go to Home
    </button>
  );
}

export default MyComponent;

总结

React Router的history对象是一个强大的工具，用于管理浏览器的历史堆栈并控制页面间的跳转。它提供了各种方法，如push方法用于执行页面跳转，goBack方法用于返回上一页。

在React Router v5中，可以使用withRouter高阶组件来访问history对象。然而，在React Router v6中，这种方法已经被废弃，取而代之的是使用useNavigate钩子来实现相同的功能。