使用react-router-dom条件渲染Link时需双击按钮才能跳转页面

问题根源 #

你遇到的双击跳转问题，核心是React状态更新的异步特性：

• 第一次点击按钮时，allowPermission函数里触发了setAllow(true)，但React的状态更新不会立即生效，此时Link的to属性还是false（因为allow仍为旧值），所以点击Link不会触发页面跳转。
• 第二次点击时，allow已经完成更新变为true，to属性正确指向/page_2，跳转才会生效。

解决方案1：使用useNavigate钩子（推荐） #

直接在点击事件里完成权限判断并触发跳转，不需要依赖状态更新，逻辑更清晰：

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

const Page_1 = () => {
  const navigate = useNavigate();

  const goToPage2 = () => {
    let arr = [1, 2, 3, 4];
    if (arr.length > 2) {
      navigate("/page_2");
    }
  };

  return (
    <button onClick={goToPage2}>To page_2</button>
  );
};

export default Page_1;

解决方案2：保留Link但用preventDefault控制跳转 #

如果一定要使用Link组件，可以通过阻止默认行为来控制是否允许跳转：

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

const Page_1 = () => {
  const handleClick = (e) => {
    let arr = [1, 2, 3, 4];
    // 不满足条件时阻止Link的默认跳转行为
    if (!(arr.length > 2)) {
      e.preventDefault();
    }
  };

  return (
    <Link to="/page_2" onClick={handleClick}>
      <button>To page_2</button>
    </Link>
  );
};

export default Page_1;

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