15、React 路由与表单处理全解析

React 路由与表单处理全解析

1. React Router 编程式导航与表单导航

在 React 应用中，导航是一个重要的功能。编程式导航可以使用 useNavigate 钩子实现，它返回一个函数，能导航到传入的路径。更多关于 useNavigate 钩子的信息可查看 React Router 文档： https://reactrouter.com/en/main/hooks/use-navigate 。

接下来，我们将重构搜索表单的导航，使用 React Router 的 Form 组件，具体步骤如下：
1. 在 Header.tsx 中，从 React Router 的导入中移除 useNavigate ，并替换为 Form 组件：

import {
  NavLink,
  Link,
  useSearchParams,
  Form
} from 'react-router-dom';

2. 在 JSX 中，将 form 元素替换为 React Router 的 Form 组件：