React路由器DOM + Flowbite :链接问题

Question

我想在使用反应路由器DOM的同时使用花咬反应。我正试着建造一个肚脐。

import {Link, useLocation} from "react-router-dom";
import {Navbar} from "flowbite-react";
...
const location = useLocation();
...
<Link to="/page">
    <Navbar.Link active={location.pathname === "/page"}>
        Link
    </Navbar.Link>
</Link>

很管用，但我收到警告：

react-dom.development.js:86 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

我理解为什么会发生这种情况(因为Link和Navbar.Link都包含<a>)，但我不知道如何修复这些警告。

Answer 1

我在useLinkClickHandler的使用中找到了一个解决方案

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

export interface AppNavLinkProps {
    to: string;
    text: string;
}

export default function AppNavLink(props: AppNavLinkProps) {
    const location = useLocation();
    const clickHandler = useLinkClickHandler(props.to);
    
    return <span onClick={clickHandler}>
        <Navbar.Link href={props.to} active={location.pathname === props.to}>
            {props.text}
        </Navbar.Link>
    </span>;
}
...
<AppNavLink to="/page" text="Link" />

这样，我就可以摆脱Link，只保留Navbar.Link，但保留Link功能(单击链接时不要重新加载页面，而是使用History API)。