React Router DOM搭配Flowbite NavBar出现a标签嵌套警告问题

直接利用Flowbite React组件提供的多态组件属性替换默认渲染标签，不需要额外嵌套Link组件，从根源避免非法DOM嵌套。

正确实现代码 #

import { Link, useLocation } from "react-router-dom";
import { Navbar } from "flowbite-react";

// 组件内获取当前路由
const location = useLocation();

// 导航链接渲染
<Navbar.Link
  as={Link}
  to="/page"
  active={location.pathname === "/page"}
>
  页面入口
</Navbar.Link>

实现说明 #

• Flowbite React的可交互组件默认支持as属性，用于替换组件默认渲染的根元素。传入as={Link}后，Navbar.Link不会再渲染自身内置的<a>标签，会直接把所有属性透传给React Router的Link组件
• 最终DOM结构只会存在一层由Link生成的<a>标签，完全符合HTML嵌套规范，控制台的校验警告会直接消失
• 原有路由跳转、导航激活态高亮的功能完全不受影响，不需要额外编写自定义跳转逻辑

版本兼容提示：如果你使用的是0.x旧版本Flowbite React，多态组件属性可能命名为component而非as，如果传as不生效可以替换为component={Link}尝试。

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