菜鸟教程
教程 react tutorial

编程式导航（useNavigate）

什么是编程式导航？

编程式导航是指在 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 钩子允许你通过编程的方式触发路由跳转。
  • 你可以通过路径字符串或配置对象来控制跳转行为。
  • 编程式导航适用于在用户交互或特定条件下执行路由跳转的场景。

相关内容