使用Remix.js Form组件时action无法重定向的问题排查

你的问题核心是Remix Form组件（客户端AJAX提交）和原生form（全页刷新）对重定向的处理逻辑存在差异，导致前者重定向失效。以下是具体的问题原因和修复方案：

• 相对路径解析歧义
  如果你在action中使用相对路径（比如redirect('..')），浏览器原生form会基于当前页面URL解析路径，但Remix客户端导航是基于路由路径解析的。虽然理论上结果一致，但建议改用绝对路径（比如redirect('/first')），这是避免解析问题最稳妥的方式。

• 子路由action的重定向处理
  子路由/first/form的action返回重定向后，Remix客户端会尝试导航到父路由，但如果父路由的loader或action存在未处理的错误，可能导致导航未触发。请确保父路由的loader能正常执行，没有抛出异常。

• Form组件配置错误
  检查你的Remix Form组件是否意外设置了阻止导航的属性，或者method设置错误：

  • Remix Form默认使用POST方法，确保action函数正确处理POST请求：

    export async function action({ request }: ActionFunctionArgs) {
      if (request.method !== 'POST') {
        throw new Response('Method Not Allowed', { status: 405 });
      }
      // 表单处理逻辑
      return redirect('/first');
    }
    

  • 可以尝试给Form组件添加replace属性，强制替换路由历史记录，避免客户端缓存影响：

    <Form method="post" replace>
      {/* 表单内容 */}
    </Form>
    

按照以上步骤调整后，Remix Form组件提交后应该能正确重定向到父路由。

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