I am using 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>)};
I am getting a warning in my console saying
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
Any idea how can I fix it? I tried other stack overflow details but could not come up with anything.
In react-router-dom@6 the NavLink component has no exact prop, so it's being passed down to the DOM it seems.
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); }
The solution is to remove the exact prop from your code since it's not doing anything for you.
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>
);
};
Since it seems you are rendering a link for the home page and you don't want it to also match for sub routes, use the end prop.
If the
endprop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use:<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>
);
};