React Router useHistory Hook路由匹配错误 跳转显示错误组件求助

问题根因 #

• 按钮点击事件绑定错误：你当前给onClick属性直接传入了history.push("/payment")的执行结果，而非可触发的回调函数。这会导致Subtotal组件渲染时就立即执行路由跳转逻辑，不需要等待用户点击按钮。
• 因为Subtotal组件是嵌套在Checkout页面内的，当你访问/checkout加载Checkout页面时，Subtotal组件同步渲染就会立刻触发跳转逻辑，页面跳转过程非常快没有明显感知，所以你会误认为访问/checkout直接返回了Payment组件。

你的路由配置本身没有错误，不需要调整路由相关代码。

修复方案 #

修改Subtotal组件内的按钮事件绑定代码，将跳转逻辑包裹在箭头函数中，仅当用户点击按钮时才执行：

import { useHistory } from "react-router-dom";

export default function Subtotal() {
  const [state, dispatch] = useStateValue();
  const history = useHistory();
  return (
    <div className="subtotal">
        
      <button onClick={() => history.push("/payment")}>Proceed to checkout</button>
    </div>
  );
}

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