使用 usehistory v6 在 React 中返回上一条路线

当我们构建一个React应用程序时，通常需要在不同组件和页面之间进行导航。 useHistory是React Router提供的一个钩子函数，它允许我们使用编程方式进行导航和管理历史堆栈。

在本文中，我们将介绍如何使用useHistory钩子函数返回上一条路线。我们还会讨论 useLocation 和 useParams 这两个有用的钩子。

使用 useHistory

当我们想要在React中进行编程方式的导航时，最方便的方式是使用useHistory钩子函数。使用此函数，我们可以访问历史堆栈并进行以下操作：

• 返回上一条路线
• 跳转到新的路线
• 在历史堆栈中添加条目
• 在历史堆栈中替换当前条目

要使用此钩子函数，请按照以下步骤操作：

1. 首先，使用该库：

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

2. 接下来，调用useHistory将创建一个history对象：

const history = useHistory();

3. 要返回上一条路线，可以使用goBack()方法：

history.goBack();

在这里，goBack()方法将导航到历史堆栈中的前一个条目。

4. 除此之外，我们还可以调用go方法并传入一个数字参数，以在历史堆栈中向前或向后移动特定数量的步骤。

history.go(-2);

此代码将向后导航两个条目。 如果历史堆栈不足两个条目，那么它将回退到第一个条目。

使用 useLocation 和 useParams

有时，在返回到先前路由之前，我们需要存储某些状态或参数。 这时，我们可以使用useLocation和useParams Hooks来处理。

useLocation钩子函数返回一个类似于window.location对象的对象，其中包含当前URL的信息，例如路径名和搜索字符串。 可以使用此钩子来存储和读取路由状态。

useParams钩子是React Router提供的另一个有用的钩子函数。 它允许我们获取在特定路径中定义的参数值。如果我们定义了一个路由参数，例如 /users/:id，那么我们可以使用useParams来访问：`.

const userId = useParams().id;

这使我们能够轻松地获取路由参数并根据参数来执行某些操作。

结论

使用useHistory，useLocation和useParams这些React Hooks，我们可以轻松地进行编程方式的导航和管理路由状态，使我们的React应用程序更加灵活和强大。 我们在本文中介绍了如何返回上一条路线，以及如何使用useLocation和useParams来存储和读取路由状态。 有了这些知识，您可以开始构建更高级的React应用程序，并控制导航和状态更加准确和高效。