React Router DOM + Flowbite NavBar: problem with links

Question

I would like to use React Router DOM alongside Flowbite React. I am trying to build a navbar.

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>

It works, but I got warnings:

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

I understand why it happens (because Link and Navbar.Link both contain <a>), but I have no idea how to fix these warnings.

Please revise your post title to ask a clear, specific question. See [ask]. — isherwood, Jun 02 '22 at 18:09
The short answer is to use one or the other. It's not at all clear why you're using both. — isherwood, Jun 02 '22 at 18:10
Based on the `Navbar.Link` component [source](https://github.com/themesberg/flowbite-react/blob/main/src/lib/components/Navbar/NavbarLink.tsx) it is a standalone link component, same as the `Link` component from `react-router-dom`. Use one or the other. — Drew Reese, Jun 02 '22 at 18:12
I think the best you could do is to take the `classNames` logic of the `Navbar.Link` implementation and apply it to the `classname` prop of a RRD `Link`, or `NavLink` since it handles active links by default. — Drew Reese, Jun 02 '22 at 18:30

score 1 · Accepted Answer · answered Jun 02 '22 at 20:33

I found a solution in the usage of 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" />

In that way I can get rid of Link and leave only Navbar.Link, but preserve Link functionality (don't reload a page when the link was clicked, but use History API).

React Router DOM + Flowbite NavBar: problem with links

1 Answers1