使用react-router-dom 6.16.0遇exact属性警告，如何解决及影响？

警告会不会影响程序运行？ #

这个警告只会在开发环境弹出来，不会影响程序正常运行，但它是React在提醒你传递了一个无效的DOM属性，长期留着可能会引发其他潜在问题，建议还是修复掉。

怎么修复？ #

问题根源是你还在用React Router v5的exact属性写法，但React Router v6（包括你用的6.16.0版本）已经彻底移除了exact属性，Link和NavLink组件都不再支持它：

• 如果原本是想做精确匹配（比如只匹配根路径/，不匹配/xxx这类子路径），在v6里换成end属性就行：

// 之前的错误写法（v5风格）
<NavLink exact to="/" activeClassName="active">首页</NavLink>

// 改成v6的正确写法
<NavLink end to="/" className={({ isActive }) => isActive ? "active" : ""}>首页</NavLink>

• 如果不需要精确匹配，直接删掉exact属性就完事：

// 错误写法
<Link exact to="/about">关于</Link>

// 正确写法
<Link to="/about">关于</Link>

为啥会出这个警告？因为v6里去掉exact后，你写的这个属性会被直接传到底层的<a>标签上，但HTML的<a>标签根本没有exact这个属性，React就会弹出属性类型不匹配的警告。

内容的提问来源于stack exchange，提问作者Viết quang Nguyễn