浅谈React Router关于history的那些事

浅谈React Router关于history的那些事

React Router是React中最流行的路由库之一，用于在React应用程序中管理不同URL之间的转换。其中一个重要的概念是history，它是实际实现路由的技术基础。本文将重点讲解React Router中关于history的那些事。

history是什么

首先，我们需要了解什么是history。在React Router中，history是一种管理浏览器会话历史记录的JavaScript库。它提供了一组API，用于从浏览器中读取URL、向浏览器写入URL，以及监听URL更改等操作。

hash history和browser history

React Router支持两种类型的history，一种叫做hash history，另一种叫做browser history。它们的区别在于URL的形式不同。

• hash history: URL中的#号之后的部分称为哈希部分，它是一种浏览器端路由的实现方式。在React应用程序中使用hash history时，URL通常会像这样：http://example.com/#/about。

• browser history：URL中没有#号，一般使用浏览器的HTML5 History API实现。这样的URL看起来像这样：http://example.com/about。

使用history对象

React Router把history作为props传递给组件，使得它们能够使用history的API。例如，我们可以使用history.push方法来推入一个新的URL，如下面的例子：

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

function Button() {
  const history = useHistory();

  function handleClick() {
    history.push('/about');
  }

  return (
    <button onClick={handleClick}>
      Go to about page
    </button>
  );
}

上面的例子中，我们使用了React Router提供的useHistory hook来获取history对象，然后在handleClick函数中使用它来推入一个新的URL。这将导致React Router的Router组件重新渲染，并显示与新URL相对应的组件。

使用其他history对象

除了React Router提供的history对象，我们还可以使用其他版本的history库来实现路由。例如，我们可以使用history库的createBrowserHistory函数来创建一个全新的browser history，然后把它传递给Router组件。

import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function App() {
  return (
    <Router history={history}>
      {/* routes */}
    </Router>
  );
}

在上面的例子中，我们使用了history库中的createBrowserHistory函数来创建一个全新的browser history对象，然后把它作为props传递给Router组件。这样React Router就会使用我们创建的history对象来管理URL与组件的对应关系。

总结

本文介绍了React Router中关于history的基础知识。我们了解了什么是history，它在React Router中的作用，以及如何使用不同类型的history对象来实现路由。

值得注意的是，在React Router中直接使用history会使得代码变得紧密耦合。因此，我们推荐在React应用程序中使用React Router提供的高级API和组件来管理URL，而避免直接操作history。