React Router动态切换<Link>与<a>标签问题排查与优化

问题根源是你可能把组件名当成字符串来使用了，React会把小写的字符串标签解析成原生HTML标签，而大写的组件变量才会被识别为自定义/第三方组件。下面是简洁且正确的实现方式：

首先确保导入react-router-dom的Link组件：

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

然后编写动态链接组件：

const DynamicLink = ({ to, children, ...restProps }) => {
  // 判断是否为锚点链接
  const isAnchorLink = to.startsWith('#');
  // 选择要渲染的组件：锚点用原生<a>，否则用React Router的<Link>
  const RenderComponent = isAnchorLink ? 'a' : Link;

  // 适配不同组件的属性名：锚点用href，路由用to
  const componentProps = {
    ...restProps,
    [isAnchorLink ? 'href' : 'to']: to
  };

  return <RenderComponent {...componentProps}>{children}</RenderComponent>;
};

使用示例 #

// 渲染锚点链接
<DynamicLink to="#section-1">跳转到章节1</DynamicLink>

// 渲染路由链接
<DynamicLink to="/user/profile">查看个人资料</DynamicLink>

为什么之前的写法失效？ #

如果之前你尝试用字符串'Link'作为组件名（比如React.createElement('Link', ...)），React会把它当成原生HTML的<link>标签（用于引入资源的那个），而不是react-router-dom的Link组件。必须直接传入Link这个组件本身，而不是字符串形式的名称。

扩展（可选） #

如果需要支持外部HTTP链接，可以再加一层判断：

const isExternalLink = to.startsWith('http') || to.startsWith('https');
const RenderComponent = isAnchorLink || isExternalLink ? 'a' : Link;

// 外部链接可以自动添加target="_blank"和rel="noopener noreferrer"
const componentProps = {
  ...restProps,
  [isAnchorLink || isExternalLink ? 'href' : 'to']: to,
  ...(isExternalLink ? { target: '_blank', rel: 'noopener noreferrer' } : {})
};

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