react-router中useLocation传state刷新页面读取user失败如何解决

错误原因 #

React Router 中通过 Link 组件 state 属性传递的数据仅保存在当前页面会话的内存中，当你刷新页面时，内存中的路由状态会被清空，useLocation() 返回的 state 就会变成 undefined，此时读取 state.user 自然会抛出属性读取错误。

解决方案 #

核心思路是不依赖路由state作为唯一数据源，优先从URL路径参数中获取用户ID，降级处理state的存在性：

1. 从路由参数获取用户ID #

你的路由路径本身已经包含 users/:id 字段，直接用 useParams 钩子拿ID即可，这部分数据存在URL里，刷新不会丢失：

// 首先导入useParams
import { useLocation, useHistory, useParams } from "react-router-dom";
import { deleteUser, editUser, fetchOneUser } from "../functions/index";
import { useState, useEffect } from "react";

const User = () => {
  const { state } = useLocation();
  const { id: userId } = useParams(); // 从路径拿用户ID，刷新不会丢失
  const user = state?.user; // 用可选链避免state为空时报错

  const history = useHistory();
  const [currentUser, setCurrentUser] = useState({});
  const [editedUser, setEditedUser] = useState({});
  const [loading, setLoading] = useState(true); // 新增加载状态避免渲染异常


  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      // 优先用state里的user.id，没有就用路径获取的userId
      const res = await fetchOneUser(user?.id || userId);
      setCurrentUser(res);
      setEditedUser({
        name: res.name,
        age: res.age
      });
      setLoading(false);
    };
    fetchData();
  }, [user?.id, userId]);

2. 补充异常场景兼容 #

如果需要处理用户直接输入URL访问、或者state完全丢失的场景，还可以补充不存在有效用户ID时的跳转逻辑：

useEffect(() => {
  // 没有有效ID直接跳回用户列表页
  if (!userId) history.push('/users')
}, [userId, history])

3. 渲染层加兜底 #

在组件返回的JSX中加加载状态判断，避免数据未加载完成时的渲染报错：

if (loading) return <div>用户信息加载中...</div>

// 后续正常渲染用户信息的逻辑
return (
  <div>
    {/* 你的页面结构 */}
  </div>
)

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