React中useLocation获取pathname显示undefined问题求助

1. 误将location.state存入状态而非完整location对象 #

你跳转时通过useNavigate传递的state是location对象的子属性，仅包含你自定义的参数，并不包含pathname这类location本身的核心属性。如果在首页组件中错误地把location.state赋值给了params状态，自然访问params.pathname会得到undefined。

错误代码示例：

const location = useLocation();
const [params, setParams] = useState({});

useEffect(() => {
  // 错误：存入的是自定义state而非完整location对象
  setParams(location.state);
}, [location]);

解决：将完整的location对象存入状态：

const location = useLocation();
const [params, setParams] = useState(location);

useEffect(() => {
  setParams(location);
}, [location]);

2. 状态更新的异步特性导致时序问题 #

React的useState更新是异步的，如果你在调用setParams后立刻访问params.pathname，此时状态还未完成更新，读取到的是初始值（比如你初始设为{}，那pathname就是undefined）。而浏览器控制台会动态展示对象的最新值，所以看起来打印了完整的location，但代码执行时访问的是旧状态。

错误场景示例：

const location = useLocation();
const [params, setParams] = useState({});

useEffect(() => {
  setParams(location);
  // 此时状态未更新，params还是初始空对象
  console.log(params.pathname); // undefined
}, [location]);

解决：要么直接使用useLocation返回的location对象（无需存入状态，它始终是最新值），要么在依赖params的useEffect中访问：

// 推荐：直接使用location对象，无需额外存状态
const location = useLocation();
console.log(location.pathname);

// 或等待状态更新后再访问
useEffect(() => {
  console.log(params.pathname);
}, [params]);

3. 初始状态未正确初始化 #

如果params的初始状态设为{}或undefined，组件首次渲染时params还未被useEffect更新为location对象，此时访问params.pathname会是undefined。

解决：直接将useLocation()作为useState的初始值：

const location = useLocation();
const [params, setParams] = useState(location);

这样组件第一次渲染时，params就拥有完整的location属性，不会出现pathname为undefined的情况。

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