React项目中点击更新按钮提交成功后如何自动重定向到首页？

基于你当前的 React 项目场景，跳转首页需要依赖项目安装的 react-router-dom 提供的导航能力，按照你使用的库版本对应操作即可：

react-router-dom v6 及以上版本（当前主流版本） #

• 第一步：在组件顶部引入 useNavigate Hook，在组件函数内部初始化导航方法

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

// 组件内部逻辑的最开头位置
const navigate = useNavigate();

• 第二步：在原 axios 请求成功的回调里，alert 提示后新增跳转代码，修改后的完整 handleSubmit 如下：

const handleSubmit = (e) => {
  e.preventDefault();
  axios
    .put(`${process.env.REACT_APP_API}/post/${slug}`, {
      title,
      content,
      user,
    })
    .then((response) => {
      console.log(response);
      const { title, content, slug, user } = response.data;
      setState({ ...state, title, content, slug, user });
      alert(`Post Title ${response.data.title} is Updated`);
      // 新增跳转逻辑，路径替换为项目实际配置的首页路由地址
      navigate('/');
    })
    .catch((error) => {
      console.log(error.response);
    });
};

react-router-dom v5 及更早版本 #

• 第一步：在组件顶部引入 useHistory Hook，组件内部初始化历史记录方法

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

// 组件内部逻辑的最开头位置
const history = useHistory();

• 第二步：成功回调里的跳转代码替换为如下写法即可：

history.push('/');

实操注意点：

• 填写的路由路径需要和你在路由配置里定义的首页路径完全一致，如果首页不是根路径，要把 '/' 换成实际路径（比如常见的 /home）
• 浏览器原生 alert 是阻塞执行的，代码会停在 alert 位置直到用户点击弹窗的确定按钮，所以跳转逻辑会等用户看完提示后再触发，交互节奏刚好符合预期，不需要额外加延时
• 单页应用优先用路由自带的导航方法，不会触发整页刷新，比原生 window.location.href 跳转体验更好；如果是多页应用场景，可以直接用 window.location.href = '/' 实现跳转

内容的提问来源于stack exchange，提问作者Alamin