为什么React Router v6中Link组件传递的state值为undefined？

核心问题定位 #

你误以为state值为undefined，实际从请求地址https://jsonplaceholder.typicode.com/posts/[object Object]可以判断：location.state拿到的是一个对象，你直接把对象拼接在URL中，对象转字符串默认输出[object Object]，才会出现这个异常请求。

这个问题通常是React Router v6不同小版本的兼容差异导致：部分版本会自动将Link的state参数封装为对象，即使你直接传递数字、字符串等原始类型值。

完整修复步骤 #

1 统一state传值格式 #

调整Post组件中Link的state传值为明确的对象格式，规避版本兼容问题：

<Link 
  to="/PostDetail" 
  state={{ id: id }}
>
  Detalles
</Link>

2 修正state取值逻辑 #

PostDetail中从state对象里取id，同时加可选链避免页面刷新后state丢失导致报错：

const id = location.state?.id;

3 修复请求逻辑错误 #

你当前的fetch写法没有返回res.json()的执行结果，导致拿不到接口返回数据，同时补充依赖项和状态赋值逻辑：

// 调整post初始值为对象，和接口返回格式对齐
const [post, setPost] = useState({});

const getPostDetail = async () => {
  // id不存在时跳过请求
  if (!id) return;
  fetch(url)
    .then((res)=>{
      return res.json() // 必须return才能把结果传到下一个then
    })
    .then((res)=>{
      console.log(res)
      setPost(res) // 将返回结果存入state
      setLoading(false)
    })
    .catch(e=>{
      console.log(e)
      setLoading(false)
    })
}

// 把id加入依赖项，id变化时自动重新请求
useEffect(()=>{
  getPostDetail();
}, [id])

内容的提问来源于stack exchange，提问作者Amadeo de la Peña