如何在react-router-dom中实现Link组件的动态页面跳转？

方案1：直接动态绑定to属性（推荐绝大多数场景使用） #

该方案写法简洁无额外性能开销，未生效通常是因为三元表达式没有放在{}中被识别为普通字符串，正确写法如下：

import { Link } from 'react-router-dom';

// 组件内部调用
<Link to={isLoggedIn ? '/device' : '/login'}>
  设备管理入口
</Link>

注意：三元表达式必须包裹在JSX的大括号{}内才会被作为表达式执行

方案2：点击事件拦截自定义逻辑（适合有前置校验的复杂场景） #

如果跳转前需要执行其他逻辑（比如行为上报、权限二次校验），可以阻止Link默认跳转行为，配合useNavigate实现自定义跳转：

import { Link, useNavigate } from 'react-router-dom';

function YourComponent() {
  const navigate = useNavigate();
  // 登录状态取自你的全局状态/本地存储
  const isLoggedIn = true;

  const handleLinkClick = (e) => {
    // 阻止Link默认跳转行为
    e.preventDefault();
    if (isLoggedIn) {
      // 可在此处添加额外逻辑
      navigate('/device');
    } else {
      navigate('/login', { state: { from: '/device' } });
    }
  }

  return (
    <Link to="" onClick={handleLinkClick}>
      设备管理入口
    </Link>
  )
}

• 以上代码适配react-router-dom v6及以上版本，v5版本可将useNavigate替换为useHistory使用
• 示例中跳转登录页时传入的state参数可用于登录成功后回跳对应页面，可根据业务需求选择是否添加

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