# 编程式导航（useNavigate）

URL: https://caijiao.org/react/chapter8/programmatic-navigation
Source: docs/react/chapter8/programmatic-navigation.md
Description: 编程式导航使你能够在 React 应用中以编程的方式进行页面跳转。使用 'useNavigate' 钩子，你可以在 React 组件中动态地进行路由跳转，控制页面的跳转逻辑，而不依赖用户的点击操作。

## 什么是编程式导航？

编程式导航是指在 React 中以代码的形式触发页面跳转。通过使用 `useNavigate` 钩子，你可以在应用的任何地方（如事件处理、生命周期方法等）进行路由跳转，而无需依赖传统的 `<Link>` 组件。

### 使用 `useNavigate`

React Router 提供了 `useNavigate` 钩子来执行编程式的路由跳转。`useNavigate` 返回一个函数，可以通过该函数进行路由导航。

### 示例

```jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 模拟登录成功后跳转到主页
    navigate('/home');
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default Login;
````

在这个示例中，点击 "Login" 按钮时，`handleLogin` 函数会被触发，并调用 `navigate('/home')` 来跳转到 `/home` 页面。

## `useNavigate` 的参数

`useNavigate` 返回的函数接受以下参数：

1. **路径字符串**：指定跳转到的目标路径。
2. **配置对象**（可选）：该对象可以包含以下配置选项：

   * `replace`: 如果为 `true`，则使用替换跳转，而不是压入浏览历史栈。这在需要避免用户按回退按钮返回到某个页面时非常有用。
   * `state`: 传递给目标页面的状态数据。

### 示例：带状态的跳转

```jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

function Profile() {
  const navigate = useNavigate();

  const handleRedirect = () => {
    // 带状态的跳转
    navigate('/details', { state: { userId: 12345 } });
  };

  return (
    <div>
      <h2>Profile Page</h2>
      <button onClick={handleRedirect}>Go to Details</button>
    </div>
  );
}

export default Profile;
```

在跳转时，我们传递了一个 `state`，它包含了用户 ID。目标页面可以通过 `useLocation` 钩子获取这些状态数据。

## 总结

* `useNavigate` 钩子允许你通过编程的方式触发路由跳转。
* 你可以通过路径字符串或配置对象来控制跳转行为。
* 编程式导航适用于在用户交互或特定条件下执行路由跳转的场景。