使用useNavigate重定向后React useEffect无法获取location状态问题

问题原因 #

这种情况核心是React Router的state传递时机与组件初始渲染时机不匹配：

• 从Header导航到SearchView时，组件可能先完成初始挂载，此时React Router还未将导航携带的state注入useLocation()，所以初始state为null。
• 加断点时代码执行被暂停，给了React Router足够时间完成state同步，因此断点执行时能拿到正确值。

解决方案1：快速判空修复 #

在useEffect中先判断state是否有效，避免传入null触发错误：

useEffect(() => {
  if (!state) return;
  
  console.log(state);
  getData(state).catch(console.error);
}, [state]);

初始渲染时state为null时会直接跳过API请求，等React Router完成state同步后，useEffect会因state变化再次触发，此时就能正常调用接口。

解决方案2：改用URL查询参数（更可靠） #

用state传递数据存在刷新丢失、时机匹配问题等弊端，更推荐将搜索参数放到URL查询参数中，组件挂载时即可同步获取，还能保留搜索状态：

修改Header.tsx的跳转逻辑：

const handleKeyDown = async (event: any) => {
  if (event.key === 'Enter') {
    const searchParams = new URLSearchParams();
    if (searchTitle) searchParams.set('title', searchTitle);
    // 其他参数如价格区间可按同样方式添加
    // if (priceFrom) searchParams.set('priceFrom', priceFrom.toString());
    
    navigate(`${ApplicationRoutes.SearchRoute}?${searchParams.toString()}`);
  }
}

修改SearchView.tsx的参数获取逻辑：

import { useSearchParams } from 'react-router-dom';

export const SearchView = () => {
  const [items, setItems] = useState<SellItemModel[]>();
  const [searchParams] = useSearchParams();

  const getData = async (params: SearchModel) => {
    const result = await SearchItemService.SearchByParams(params);
    setItems(result);
  }

  useEffect(() => {
    const params: SearchModel = {
      title: searchParams.get('title') || '',
      priceFrom: searchParams.get('priceFrom') ? Number(searchParams.get('priceFrom')) : null,
      priceUntil: searchParams.get('priceUntil') ? Number(searchParams.get('priceUntil')) : null,
      getCount: null,
      skipCount: null
    };
    
    getData(params).catch(console.error);
  }, [searchParams]);

  // ...
}

这种方式不仅解决了当前的state时机问题，还能让用户刷新页面后保留搜索条件，体验更完善。

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