21、测试驱动的 React Router 和 Redux 开发

测试驱动的 React Router 和 Redux 开发

测试程序化导航

有时候，你可能希望以编程方式触发位置更改，即不等待用户点击链接。实现这一点有两种方法：一种是使用 useNavigate 钩子，另一种是使用传递给顶级路由器的 history 实例。本文主要介绍使用 useNavigate 钩子的方法。

useNavigate 钩子适用于从 React 组件内部进行导航的情况。在预约应用程序中，有两个地方会用到这种导航：一是添加客户后，将用户导航到 /addAppointment 路由；二是完成表单填写并创建预约后，将用户导航回默认路由。由于这两种情况非常相似，我们只看第一种。

以下是 src/App.js 中 /addCustomer 路由的定义：

<Route
  path="/addCustomer"
  element={
    <CustomerForm
      original={blankCustomer}
      onSave={transitionToAddAppointment}
    />
  }
/>

注意 onSave 属性，这是客户表单提交完成后调用的回调函数。以下是该回调函数的定义，以及与 useNavigate 钩子相关的部分：