如何在 React Router v6 中正确实现表单提交后的页面跳转-js教程-PHP中文网

本文详解 React Router v6 中 useNavigate 钩子的正确用法，解决因误用组件导致的跳转失效问题，并提供可立即上手的代码示例与关键注意事项。

本文详解 react router v6 中 `usenavigate` 钩子的正确用法，解决因误用 `` 组件导致的跳转失效问题，并提供可立即上手的代码示例与关键注意事项。

在 React Router v6 中，页面导航必须通过 useNavigate 钩子（推荐）或导航组件（声明式）来实现。但二者使用场景有本质区别：是一个仅在 JSX 渲染时生效的 React 组件，不能像函数一样被直接调用；而 useNavigate 返回的是一个可编程调用的导航函数，适用于事件处理、异步逻辑（如表单提交成功后）等场景。

你原代码中存在两个关键错误：

误将当作函数调用：

if(submitted = true){  // ❌ 错误：= 是赋值，应为 === 或直接写 submitted
  Navigate('./Confermation'); // ❌ 错误：Navigate 不是函数，不能直接调用
}

拼写不一致：路径 './Confermation' 与文件名 './Confirmation' 不匹配（注意 f 和 r 的顺序），且大小写敏感（如部署在 Linux 服务器上会失败）。

react-pro
你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

✅ 正确做法是：在组件顶层调用 useNavigate() 获取导航函数，并在 handleSubmit 成功回调中同步调用它：

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

const Mainpage = () => {
  const navigate = useNavigate(); // ✅ 在组件顶部初始化

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // ... 你的 axios 请求逻辑
      console.log('Data sent to Airtable:', response.data);

      // ✅ 提交成功后立即跳转（无需等待渲染）
      navigate('/confirmation'); // 推荐使用绝对路径，避免相对路径歧义
    } catch (error) {
      console.error('Error sending data:', error);
    }
  };

  return (
    <div classname="main-container">
      <form onsubmit="{handleSubmit}">
        {/* 表单字段 */}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

? 重要注意事项：

useNavigate 必须在函数组件内部或自定义 Hook 中调用（遵守 Hook 规则）；
路径建议使用绝对路径（如 /confirmation）而非相对路径（如 ./confirmation），避免嵌套路由下解析异常；

确保目标路由已在 Routes 中正确定义，例如：

<routes><route path="/" element="{<Mainpage"></route>} />
  <route path="/confirmation" element="{<Confirmation"></route>} />
</routes>

若需传递状态（如成功消息），可使用 navigate('/confirmation', { state: { success: true } })，并在目标组件中通过 useLocation().state 读取。

? 总结：在异步操作（如 API 调用）后执行跳转，请始终优先使用 useNavigate 钩子；仅当需要根据条件在渲染阶段自动重定向（如权限校验失败）时，才使用并确保它作为 JSX 元素返回。