React项目Redux Action中window.location.pathname返回上页值的问题

首先得拆解你遇到的那个console.log“假象”：你第一个console.log(window)看起来显示的是当前页面路径，但这是浏览器控制台的特性——因为window是引用类型，当你在控制台展开它的时候，浏览器会实时读取当前的window对象状态，而不是执行console.log那一瞬间的状态。第二个console.log(window.location.pathname)是直接打印原始值，显示的才是函数执行时的真实旧路径。

核心问题在于：在Redux Action里直接依赖window.location是不可靠的，React单页应用的路由切换是客户端行为，当你触发getBlog这个Action时，可能路由还没完成更新，导致拿到的是旧路径。

下面给你两个靠谱的解决方案：

方案1：从组件传递当前路由路径到Action #

利用React Router提供的API获取最新路由信息，再传给Action，彻底避免直接依赖window.location：

1. 在组件中用useLocation钩子（函数组件）或withRouter高阶组件（类组件）拿到当前路由：

// 函数组件示例
import { useLocation, useDispatch } from 'react-router-dom';
import { getBlog } from './your-action-file';

function YourBlogComponent() {
  const location = useLocation();
  const dispatch = useDispatch();

  // 调用Action时传入当前路径
  const fetchBlogData = (type, offset) => {
    dispatch(getBlog(type, offset, location.pathname));
  };

  return <button onClick={() => fetchBlogData('tech', 3)}>加载博客</button>;
}

2. 修改Action函数，接收传入的当前路径：

export const getBlog = (type, offset, currentPath) => { 
  console.log(currentPath); // 现在这里拿到的是最新的页面路径
  if( currentPath !== '/planner' ){
    return (dispatch) => { 
      dispatch({ type: 'BLOG_LOADING_START'})
      axios.get(siteurl + TPW.CATEGORY_API + type, { headers: { 'Content-Type': 'application/json' } })
      .then(response => { 
        let ary = response.data.slice(0, offset)
        dispatch({ 
          type: 'SET_BLOG_DATA', 
          list: response.data, 
          blogData: ary, 
          total: response.data.length, 
          offSetCnt: 3 
        })
        dispatch({ type: 'BLOG_LOADING_DONE'})
      }); 
    } 
  } 
}

方案2：监听路由变化再触发Action #

如果你的Action需要在路由切换后自动执行，可以用useEffect监听location变化，确保路由完全更新后再触发Action：

import { useLocation, useDispatch } from 'react-router-dom';
import { useEffect } from 'react';
import { getBlog } from './your-action-file';

function YourBlogComponent() {
  const location = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    // 路由变化时，检查路径并触发Action
    if (location.pathname !== '/planner') {
      dispatch(getBlog('tech', 3));
    }
  }, [location, dispatch]); // 依赖location，确保路由变化时重新执行

  return <div>博客列表</div>;
}

这两种方案都能规避window.location带来的时机问题，因为React Router的location对象会和路由状态同步更新，保证你拿到的是当前页面的真实路径。

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