如何基于条件控制React的NavLink组件跳转行为？

要实现点击NavLink时先执行异步条件判断，再决定是更新状态还是跳转，且不使用history.push，可以通过以下步骤修改代码：

关键问题修正与思路 #

1. 提前阻止默认跳转：由于条件判断是异步操作，必须在点击事件触发时立即阻止NavLink的默认跳转行为，否则异步结果返回前页面已经完成跳转。
2. 使用Ref触发跳转：当条件不满足需要跳转时，通过Ref获取NavLink的DOM元素，手动触发其点击事件，同时添加标志位避免循环触发判断逻辑。
3. 修复语法错误：补充事件参数e、正确调用this.setState，确保异步函数返回Promise。

完整代码 #

import React from "react";
import { NavLink } from "react-router-dom";

class SomePage extends React.Component {
  constructor() {
    super();
    this.state = {
      someVar: false,
      isManualClick: false // 标记是否为手动触发的跳转，避免循环执行判断逻辑
    };
    // 创建NavLink的Ref
    this.navLinkRef = React.createRef();
  }

  // 确保异步函数返回Promise，模拟业务逻辑
  someFunction = () => {
    return new Promise((resolve) => {
      // 模拟异步操作（比如接口请求）
      setTimeout(() => {
        // 这里可替换为实际的条件判断结果
        resolve(true); // 返回true则更新状态，返回false则跳转
      }, 1000);
    });
  };

  onClick = (e) => {
    // 如果是手动触发的跳转，直接放行，不执行判断逻辑
    if (this.state.isManualClick) {
      this.setState({ isManualClick: false });
      return;
    }

    // 立即阻止默认跳转行为
    e.preventDefault();

    this.someFunction().then((someBool) => {
      if (someBool) {
        // 条件为true，更新状态
        this.setState({ someVar: true });
      } else {
        // 条件为false，标记为手动触发后，调用NavLink的点击事件实现跳转
        this.setState({ isManualClick: true }, () => {
          this.navLinkRef.current.click();
        });
      }
    });
  };

  render() {
    return (
      <div className="App">
        <form>
          <NavLink
            ref={this.navLinkRef}
            to="/anotherPage"
            onClick={this.onClick}
          >
            Another Page
          </NavLink>
        </form>
      </div>
    );
  }
}

export default SomePage;

代码说明 #

• Ref的使用：通过React.createRef()获取NavLink的DOM引用，在需要跳转时手动触发点击事件，完全依赖NavLink自身的跳转逻辑，符合需求。
• 标志位isManualClick：避免手动触发点击时再次进入条件判断逻辑，确保跳转流程正常执行。
• 异步函数处理：someFunction必须返回Promise，才能通过then获取判断结果，你可以将内部逻辑替换为实际的业务校验（比如用户权限检查、表单验证等）。

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