Remix.run中删除记录后重定向功能失效问题求助

核心问题原因 #

当前路由文件仅导出了action函数，缺少默认导出的React组件。Remix框架要求每个路由文件必须提供一个默认导出的组件，即便是仅处理后台逻辑的路由也不例外。当action执行完成返回重定向后，客户端会尝试渲染该路由的组件，由于没有组件可渲染，触发了"Element type is invalid"的报错，同时这个错误中断了客户端的重定向处理流程，导致页面停留在当前URL。

解决方案 #

在路由文件中添加一个默认导出的占位组件，示例如下：

import { ActionArgs, redirect } from "@remix-run/node";
import { requireAuthor } from "~/session.server";
import invariant from "tiny-invariant";
import { deletePost } from "~/models/blog.server";

export async function action({ request, params }: ActionArgs) {
  await requireAuthor(request);
  invariant(params.slug, "slug not found");
  await deletePost({ slug: params.slug });
  return redirect('/blog');
}

// 添加默认导出组件
export default function DeletePostRoute() {
  // 可返回null或简单提示，不影响功能
  return null;
}

额外检查点 #

• 确认提交删除请求的表单使用method="POST"，且action属性正确指向当前路由的路径
• 验证requireAuthor函数逻辑：仅在未授权时返回响应，授权通过时无返回值（仅执行验证）
• 确认redirect('/blog')中的路径/blog对应存在有效路由，可正常渲染组件

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