Rails后端Update控制器返回JSON后如何重定向至捐赠列表页？

你遇到的核心问题是前后端分离架构中，后端的redirect_to对AJAX请求无效——因为前端是通过JS发起的异步请求（HTTP.patch），浏览器不会自动执行后端返回的重定向指令，只会把响应交给JS处理。所以后端改redirect_to或路由都没用，得让前端在请求成功后手动跳转。

步骤1：保持后端控制器逻辑（无需修改redirect） #

后端继续返回JSON即可，不用改update动作，因为它的职责是处理数据更新并返回结果，跳转是前端的事：

def update
  if @donation.update(donation_params)
    render json: @donation, status: :ok
  else
    render json: @donation.errors, status: :unprocessable_entity
  end
end

步骤2：前端添加跳转逻辑 #

在React组件的请求成功回调里，用路由工具跳转到捐赠列表页。根据你使用的React Router版本，分两种情况：

如果你用React Router v6： #

1. 导入useNavigate钩子：

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { HTTP } from "../../api/resources";
import { useNavigate } from 'react-router-dom'; // 新增导入

2. 在组件内初始化导航方法：

export default function DonationsEdit({donation: donationProps}) {
  const navigate = useNavigate(); // 新增
  const [donation, setDonation] = useState(null);
  const [saving, setSaving] = useState(false);
  
  // ... 原有的useEffect代码

3. 在请求成功的then回调里添加跳转：

.then(response => {
  Alert.show("notice", "Donation Item Saved!");
  setDonation(response.data);
  setSaving(false);
  navigate('/donations'); // 新增：跳转到捐赠列表页
})

如果你用React Router v5： #

1. 导入useHistory钩子：

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

2. 初始化history对象：

const history = useHistory();

3. 回调里用history.push跳转：

.then(response => {
  // ... 其他代码
  history.push('/donations');
})

关键说明 #

• 不要修改routes.rb的PATCH路由指向index，这会破坏RESTful规范，而且根本解决不了前端跳转的问题。
• 确保你的前端路由配置中，/donations已经关联到对应的捐赠列表组件，否则跳转后会出现404空白页。

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