React封装NavLink组件出现staticContext属性识别警告问题

这个警告出现的原因很明确：你把React Router内部使用的staticContext属性传递给了普通DOM元素，而它并不是合法的HTML属性，React就会抛出这个提示。

通常这种情况发生在你的自定义包装组件结构里，把所有接收的props直接Spread到了外层DOM容器上，而不是只传给NavLink组件。比如错误的写法可能是这样：

// 错误示例：把所有props（包括staticContext）传给了div元素
const CustomNavLink = (props) => {
  return (
    <div className="nav-link-wrapper" {...props}>
      <NavLink />
    </div>
  );
};

正确的解决方案 #

你需要把props拆分：只将DOM容器需要的属性传给它，把剩下的所有属性（包括NavLink需要的和React Router内部的props）传给NavLink。

方案1：解构分离props

如果你的外层容器需要特定的props（比如自定义className），可以显式解构出来，剩下的用rest操作符传给NavLink：

const CustomNavLink = ({ wrapperClassName, ...navLinkProps }) => {
  return (
    <div className={`nav-link-wrapper ${wrapperClassName}`}>
      <NavLink {...navLinkProps} />
    </div>
  );
};

方案2：直接剔除staticContext

如果你不确定哪些是React Router的内部props，也可以直接从props中剔除staticContext，再传给NavLink（其实NavLink本身可以接收这个属性，但如果你的外层DOM拿到它就会报错，所以重点是不让DOM元素拿到它）：

const CustomNavLink = (props) => {
  // 剔除staticContext，避免传给DOM元素
  const { staticContext, ...rest } = props;
  // 如果你的组件不需要外层容器，直接返回NavLink即可
  return <NavLink {...rest} />;
  
  // 如果有外层容器，只给容器传它需要的属性，比如className、style等
  // return (
  //   <div className="nav-wrapper">
  //     <NavLink {...rest} />
  //   </div>
  // );
};

方案3：确保根组件是NavLink

如果你的自定义组件只是对NavLink做一些样式或逻辑增强，不需要额外的外层DOM容器，那直接把所有props传给NavLink就不会有问题：

const CustomNavLink = (props) => {
  // 比如添加自定义的active类名逻辑
  const customProps = {
    ...props,
    className: ({ isActive }) => `${props.className} ${isActive ? 'custom-active' : ''}`
  };
  return <NavLink {...customProps} />;
};

这样React Router的内部props会被NavLink正确处理，不会出现在DOM元素上，警告自然就消失了。

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