0

0

如何在 React 18 中实现路由跳转与页面重定向

花韻仙語

花韻仙語

发布时间:2026-02-07 11:12:40

|

307人浏览过

|

来源于php中文网

原创

如何在 React 18 中实现路由跳转与页面重定向

react 18 配合 react router v6 后,`withrouter` 和 `history.push()` 已被移除,需改用 `usenavigate` 钩子完成编程式导航,如表单提交后的跳转或重定向。

在 React Router v6(推荐与 React 18 搭配使用)中,所有历史管理逻辑已被重构为函数式 API,useNavigate 是替代旧版 this.props.history.push() 或 withRouter 的标准方式。它返回一个 navigate 函数,支持相对/绝对路径跳转、状态传递及导航类型控制(如 replace: true 实现无痕重定向,避免用户点击浏览器“后退”返回到编辑页)。

以下是一个典型场景的完整示例:用户在编辑文章页提交表单后,成功更新数据并跳转回首页(/),且不留下编辑页的导航记录:

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

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

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    axios.put(`/api/posts/${id}`, state)
      .then(() => {
        // ✅ 编程式重定向:跳转至首页,且替换当前历史记录
        navigate('/', { replace: true });
      })
      .catch(err => {
        console.error('更新失败:', err.response?.data || err.message);
      });
  }, [id, state, navigate]);

  return (
    
setState(prev => ({ ...prev, title: e.target.value }))} placeholder="标题" />