如何用useNavigate或替代方案实现单按钮页面切换并解决跳转异常

你的问题根源在于手动维护的editMode状态与实际路由状态不一致，比如刷新页面、手动修改地址栏URL，或者组件重新渲染时，editMode的状态会和当前路由路径脱节，导致点击按钮时跳转逻辑出错。

最优解决方案：基于路由状态实现切换 #

直接通过React Router提供的useLocation钩子获取当前路由路径，代替自己维护的editMode状态，让按钮的显示和跳转逻辑完全依赖实际路由，从根源避免状态不一致问题：

import { useNavigate, useLocation } from "react-router-dom";
import "./style.css";

const SideButton = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 根据当前路由路径判断所处页面
  const isOnEditPage = location.pathname === "/edit";

  const handleClick = () => {
    // 直接切换到对立页面
    navigate(isOnEditPage ? "/" : "/edit");
  };

  return (
    <div className="side-button-container" onClick={handleClick}>
      {isOnEditPage ? "Home" : "Edit"}
    </div>
  );
};

export default SideButton;

方案优势 #

• 完全和路由状态绑定，不管刷新页面、手动修改URL，按钮的显示和跳转逻辑都会自动同步
• 移除了不必要的useState，简化组件逻辑，减少潜在bug
• 逻辑直观，无需额外维护状态同步的代码

备选方案：同步状态与路由（不推荐） #

如果因为特殊场景需要保留editMode状态，必须添加状态同步逻辑，确保editMode始终和当前路由一致：

import { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import "./style.css";

const SideButton = () => {
  const [editMode, setEditMode] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  // 监听路由变化，同步更新editMode状态
  useEffect(() => {
    setEditMode(location.pathname === "/edit");
  }, [location.pathname]);

  const handleClick = () => {
    navigate(editMode ? "/" : "/edit");
    setEditMode(prev => !prev);
  };

  return (
    <div className="side-button-container" onClick={handleClick}>
      {editMode ? "Home" : "Edit"}
    </div>
  );
};

export default SideButton;

这种方案需要额外维护状态同步逻辑，不如第一种方案简洁，仅在特殊场景下使用。

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