React中能否通过扩展属性传递ElementType？Nav.Link传as报错求助

嘿，这个坑我之前踩过，一眼就看出问题所在啦！

问题根源 #

你在定义props的时候犯了一个小错误：as: { Link } 其实是把Link组件包装成了一个对象（相当于as: { Link: Link }），但Nav.Link的as属性需要接收的是组件类型——要么是React函数/类组件，要么是内置HTML标签的字符串（比如'a'），而不是一个普通对象，这就是为什么会抛出「Element type is invalid」的错误。

对比一下两种写法的差异：

• 直接写 <Nav.Link as={Link}> 时，{Link} 是JSX的表达式语法，传递的是Link组件本身；
• 但在对象里写 as: { Link }，就变成了传递一个包含Link属性的对象，完全不符合as属性的预期类型。

正确的写法 #

只需要把props里的as值改成直接引用Link组件即可：

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

// 正确的props定义
const props = { as: Link, to: '/' };
return <Nav.Link {...props}>link</Nav.Link>;

补充说明 #

你的思路完全没问题：让不依赖react-router的组件库通过as属性接收外部传入的路由组件，这样既避免了给组件库强加依赖，又能实现路由跳转功能。如果后续需要传递HTML标签（比如原生a标签），直接传字符串就行，比如as: 'a'，同样不要包在对象里。

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