React路由点击跳转异常：页面加载时自动跳转而非点击后跳转

你代码里的onClick={this.linkto("a")}写法存在问题——这种方式会在组件渲染阶段直接调用linkto("a")方法，而不是等到用户点击div时才触发。所以页面一加载，navigate("a")就被执行，导致自动跳转。

有两种常用的修正方式：

方式一：用箭头函数包裹调用逻辑 #

把onClick的回调改成箭头函数，让它在点击时才执行linkto方法：

<div onClick={() => this.linkto("a")} className="card">

方式二：让linkto返回一个函数 #

修改linkto方法，让它返回一个待执行的函数，这样渲染时只会生成函数，不会立即执行跳转逻辑：

// 修改linkto方法
linkto = (name) => () => {
  // 这里写你的其他逻辑
  this.props.navigate(name)
}

// 调用时直接传参
<div onClick={this.linkto("a")} className="card">

额外提示 #

类组件中的普通方法存在this指向问题，建议把linkto改成类属性箭头函数的形式，避免点击时出现this为undefined的报错：

// 改成箭头函数绑定this
linkto = (name) => {
  // 其他逻辑
  this.props.navigate(name)
}

内容的提问来源于stack exchange，提问作者Jonathan Giovanni Muñoz Flores