迹忆客 专注技术分享

导航是任何现代应用程序的重要组成部分。基于 JavaScript 的框架通常依赖默认历史对象作为其不同导航解决方案的基础。此对象可用作 DOM 的 Window 对象的属性。

在 React 中开发应用程序时，开发人员可以使用 React Router 库。它提供了所有导航功能，包括历史包，浏览器历史记录界面的改进版本。React Router history 对象包括许多我们可以用来配置导航的属性和方法，例如 action、location、.push() 或 .replace()。我们将在下面的部分中回顾如何最好地使用这些属性和方法来处理关键的导航需求。

history 包（或简称为 history）是在 JS 中管理会话历史所需的关键工具。如前所述，它包括许多方法，所有这些方法都以自己的方式有用。尽管如此，history.push() 方法可以说是最重要的，也将是我们指南的主要焦点。

浏览器会跟踪用户访问的不同 URL。这个会话历史被称为历史堆栈，它是浏览器的后退或前进按钮工作所必需的。

History 对象具有可以影响历史堆栈的属性和方法。例如，.replace() 方法替换历史堆栈上的最新路径。 .length 属性为我们提供了堆栈中的条目数。

.push() 方法可能是最重要和最广泛使用的方法。开发人员使用它将条目推送到堆栈中，将用户重定向到另一个页面。这种方法是必不可少的，我们将在本指南的后面部分详细讨论它。

location 对象显示有关应用程序当前（有时是过去）路径名的信息。React Router 使这个对象多次可用。例如，它可以作为 props 对象的属性在 Route 组件中访问。在官方 React Router 文档上了解更多信息。

history 对象也有 location 属性。但是，history 对象是可变的，因此不建议使用 location 属性的值。相反，你可以通过 <Route> 的 props 访问 location。这样，你就可以确定你正在访问正确的位置信息。

在开发应用程序时，你经常需要在用户执行操作后更改用户的路径。为此，你需要设置事件处理程序并使用 .push() 方法重定向到特定路径名。

自从引入钩子后，功能组件变得更加有用。随着 v5 的发布，react-router-dom 也开始提供一个 useHistory() 钩子来更容易地访问历史对象。让我们看一个实际的例子：

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

在这个例子中，我们有一个简单的 Homepage 组件。首先，我们从 react-router-dom 包中导入 useHistory 钩子。你必须安装 react-router-dom（或更高版本）的第 5 版才能使其正常工作。钩子返回组件的 history 对象，存储在 historyObj 变量中。

我们可以在处理函数中使用前面提到的 .push(string) 方法，它接受一个字符串参数。它将字符串推送到历史堆栈并将用户带到指定的路径。

React Router 的第 4 版不包含 useHistory 挂钩，因此你必须通过 props 传递 history 对象。这也是访问与钩子不兼容的类组件中的历史的唯一方法。

你可以使用处理程序函数中的 .push() 方法导航到另一个路径。让我们看一下这个例子：

function handleClick() {
    this.props.history.push("/")
}

要通过 props 访问 history 对象，你必须确保你的组件可以访问它。有两种方法可以这样做。

<Route path="/" component={Homepage} />

在这种情况下，Homepage 组件将可以通过 props 访问 history 对象。

<Route path="/" render={(props) => <Homepage {...props} />}/>