React Router中state的from有值，为何点击返回仍重定向到空路径？

你当前的代码问题出在replace: true这个配置上：当你用replace方式跳转时，会替换掉当前浏览器历史记录栈中的当前条目。举个例子，假设你之前在/inicio页面，点击按钮后，历史记录里的/inicio会被替换成/carrito，此时历史栈里只有/carrito（如果之前是第一个页面），点击返回按钮自然会回到空路径。而且你设置的state.from只是存在路由的location对象里，并没有实际处理返回逻辑。

下面是两种可行的解决方案：

方案一：在Carrito组件中监听返回事件 #

在/carrito对应的组件里，通过监听浏览器的popstate事件，强制拦截返回动作并重定向到/inicio：

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

function Carrito() {
  const navigate = useNavigate();

  useEffect(() => {
    // 定义返回按钮的处理函数
    const handleBrowserBack = () => {
      // 跳转到/inicio，同时替换当前历史记录，避免返回循环
      navigate('/inicio', { replace: true });
    };

    // 监听popstate事件（浏览器返回按钮触发）
    window.addEventListener('popstate', handleBrowserBack);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('popstate', handleBrowserBack);
    };
  }, [navigate]);

  return (
    <div>
      {/* 你的购物车页面内容 */}
    </div>
  );
}

export default Carrito;

这个方法的好处是，不管用户从哪个页面进入/carrito，点击返回按钮都会统一跳转到/inicio，符合你全局导航栏访问的场景。

方案二：调整跳转逻辑（仅适用于从特定页面进入的场景） #

如果你的/carrito按钮只在/inicio页面出现，可以去掉replace: true，改用正常的push跳转，这样历史栈会保留/inicio，点击返回自然回到该页面：

<button
  type="button"
  className="cart"
  onClick={() => {
    navigate("/carrito"); // 去掉replace，默认是push
  }}
>

但因为你的按钮是全局导航栏的，用户可能从任意页面进入/carrito，所以方案一更适合你的需求。

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