Estoy usando Navlink
import { NavLink } from "react-router-dom"; const MainMenu = () => { return ( <nav className="main-menu d-none d-lg-block"> <ul className="d-flex"> <li> <NavLink exact to="/"> Home </NavLink> </li> </ul> </nav>)};Recibo una advertencia en mi consola que dice
bundle.js:30762 Warning: Received `true` for a non-boolean attribute `exact`. If you want to write it to the DOM, pass a string instead: exact="true" or exact={value.toString()}. at a at LinkWithRef (http://localhost:3000/static/js/bundle.js:59806:5) at NavLinkWithRef (http://localhost:3000/static/js/bundle.js:59852:21) at li at div at header at Header (http://localhost:3000/static/js/bundle.js:11996:91) at Routes (http://localhost:3000/static/js/bundle.js:60295:5) at NavScrollTop (http://localhost:3000/static/js/bundle.js:3960:51) at Wrapper (http://localhost:3000/static/js/bundle.js:4034:78) at Router (http://localhost:3000/static/js/bundle.js:60228:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:59704:5) at App¿Alguna idea de cómo puedo solucionarlo? Probé otros detalles de desbordamiento de pila pero no pude encontrar nada.
En react-router-dom@6 , el componente NavLink no tiene un accesorio exact , por lo que parece que se transmite al DOM.
declare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }
La solución es eliminar el accesorio exact de su código, ya que no está haciendo nada por usted.
import { NavLink } from "react-router-dom"; const MainMenu = () => { return ( <nav className="main-menu d-none d-lg-block"> <ul className="d-flex"> <li> <NavLink to="/">Home</NavLink> </li> </ul> </nav> ); }; Dado que parece que está representando un enlace para la página de inicio y no desea que coincida también con las rutas secundarias, use la propiedad end .
Si se usa el complemento
end, se asegurará de que este componente no coincida como "activo" cuando coincidan sus rutas descendientes. Por ejemplo, para representar un enlace que solo está activo en la raíz del sitio web y no en ninguna otra URL, puede usar:<NavLink to="/" end> Home </NavLink>
import { NavLink } from "react-router-dom"; const MainMenu = () => { return ( <nav className="main-menu d-none d-lg-block"> <ul className="d-flex"> <li> <NavLink end to="/">Home</NavLink> </li> </ul> </nav> ); };