React页面条件组件渲染异常：路由跳转路径错误求助

问题根源 #

你的Login组件中按钮的onClick绑定写法错误：

<button onClick={navigate("/users/join")}>Join</button>
<button onClick={navigate("/users/resetPw")}>resetPw</button>

这里直接调用了navigate()函数，导致Login组件挂载时就会立即执行路由跳转，而非点击按钮时触发。当组件渲染时，两个navigate会先后执行，最终路由被覆盖为最后执行的/users/resetPw，这就是点击Join按钮却跳转到resetPw页面的原因。

修复方案 #

将onClick改为传递回调函数，确保只有点击按钮时才执行跳转：

<button onClick={() => navigate("/users/join")}>Join</button>
<button onClick={() => navigate("/users/resetPw")}>resetPw</button>

验证逻辑 #

修改后，点击Join按钮时才会触发navigate("/users/join")，路由参数page_type会被正确设置为"join"，Users组件就能正常渲染Join子组件；同理点击resetPw按钮会正确跳转到重置密码页面。

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