React Router DOM v6.4中重定向时如何传递数据？

你当前调用redirect()函数的方式有误，导致state数据没传过去。在React Router v6.4中，redirect函数需要直接传入一个Location对象（包含pathname和state属性），而不是分开传递路径字符串和配置对象。

修正后的action代码 #

import { Form, redirect } from "react-router-dom";

export function action() {
  // 正确写法：传入包含pathname和state的Location对象
  return redirect({
    pathname: "/home",
    state: { value: 5 }
  });
}

export default function Blog() {
  return (
    <Form method="post">
      <button>Submit</button>
    </Form>
  );
}

接收数据的Home组件（可补充空值判断） #

import { useLocation } from "react-router-dom";

export default function Home() {
  const location = useLocation();
  // 可选：添加空值判断，避免state不存在时抛出错误
  console.log(location.state?.value); 
  return <div>Home</div>;
}

这种传递方式和旧版本<Redirect>组件的to属性逻辑一致，state中的数据会存在浏览器历史记录里，不会暴露在URL中，适合传递临时的、不需要公开的数据。

内容的提问来源于stack exchange，提问作者Martí Serra Molina