如何在React中清除Location State？（导航传参场景）

首先在目标页面（back_page）中，你需要先通过useLocation获取传入的状态，再通过React Router提供的API清除该状态，以下是具体实现：

步骤1：获取并处理传入的State #

在back_page组件中，使用useLocation拿到导航时传入的is_returning状态，处理完业务逻辑后清除状态：

import { useLocation, useNavigate, useEffect } from 'react-router-dom';

const BackPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const isReturning = location.state?.is_returning;

  useEffect(() => {
    // 先处理你需要的业务逻辑（比如根据isReturning执行对应操作）
    if (isReturning) {
      console.log('返回状态:', isReturning);
      
      // 清除Location State
      navigate(location.pathname, { 
        replace: true, 
        state: undefined // 清空state
      });
    }
  }, [isReturning, navigate, location.pathname]);

  return <div>目标页面内容</div>;
};

export default BackPage;

核心清除逻辑说明 #

上面代码中使用的navigate方法搭配replace: true是最推荐的方式：

• replace: true会替换当前的历史记录条目，而不是新增一条，避免回退时重复触发状态逻辑
• state: undefined会彻底清空当前路由的Location State，后续刷新或切换路由时都不会再读取到旧状态

另一种可选方式（底层API） #

如果你需要更底层的操作，也可以直接调用浏览器的history.replaceState方法，但建议优先使用React Router提供的API以保持路由状态一致：

useEffect(() => {
  if (isReturning) {
    // 业务逻辑处理...
    window.history.replaceState({}, document.title);
  }
}, [isReturning]);

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture