如何在 React 18 中实现路由跳转（重定向）-js教程

react 18 配合 react router v6 后，`withrouter` 和 `history.push()` 已被移除，应改用 `usenavigate` hook 实现编程式导航，包括表单提交后的页面重定向。

在 React Router v6 中，路由控制逻辑全面函数式化，所有历史操作（如跳转、重定向、后退）均通过 useNavigate Hook 获取的 navigate 函数完成。该函数替代了 v5 中的 this.props.history.push 或 history.replace，且默认执行 PUSH 导航（即新增浏览器历史记录），若需模拟传统“重定向”（不保留当前页返回入口），应显式传入 { replace: true } 选项。

以下是一个典型场景：编辑文章后返回首页（/），并避免用户点击浏览器“返回”按钮重新进入编辑页：

import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';

function EditPostPage() {
  const { id } = useParams(); // 获取 URL 中的动态参数，如 /posts/:id
  const navigate = useNavigate();
  const [state, setState] = useState({ title: '', content: '' });

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    axios
      .put(`/api/posts/${id}`, state)
      .then(() => {
        // 编辑成功后重定向至首页，使用 replace 避免历史栈残留
        navigate('/', { replace: true });
      })
      .catch((err) => {
        console.error('更新失败:', err.response?.data || err.message);
      });
  }, [id, state, navigate]);

  return (
    
  );
}

export default EditPostPage;

⚠️ 注意事项：