本文详解 React Router v6 中 useNavigate 钩子的正确用法，解决因误用 <Navigate> 组件导致的跳转失效问题，并提供可立即上手的代码示例与关键注意事项。
本文详解 react router v6 中 `usenavigate` 钩子的正确用法，解决因误用 `
在 React Router v6 中，页面导航必须通过 useNavigate 钩子（推荐）或 <Navigate> 导航组件（声明式）来实现。但二者使用场景有本质区别：<Navigate> 是一个仅在 JSX 渲染时生效的 React 组件，不能像函数一样被直接调用；而 useNavigate 返回的是一个可编程调用的导航函数，适用于事件处理、异步逻辑（如表单提交成功后）等场景。
你原代码中存在两个关键错误：
-
误将 <Navigate> 当作函数调用：
if(submitted = true){ // ❌ 错误：= 是赋值，应为 === 或直接写 submitted Navigate('./Confermation'); // ❌ 错误：Navigate 不是函数，不能直接调用 } 拼写不一致：路径 './Confermation' 与文件名 './Confirmation' 不匹配（注意 f 和 r 的顺序），且大小写敏感（如部署在 Linux 服务器上会失败）。
✅ 正确做法是：在组件顶层调用 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 path="/confirmation" element={<Confirmation />} /> </Routes> - 若需传递状态（如成功消息），可使用 navigate('/confirmation', { state: { success: true } })，并在目标组件中通过 useLocation().state 读取。
? 总结：在异步操作（如 API 调用）后执行跳转，请始终优先使用 useNavigate 钩子；仅当需要根据条件在渲染阶段自动重定向（如权限校验失败）时，才使用 <Navigate to="..." /> 并确保它作为 JSX 元素返回。
