React Route for NAVLINK Received TRUE for a non-boolean attribute

user_13856242 0
Viewed 314

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.

react-router-dom react-router reactjs javascript
1 Answers

In react-router-dom@6 the NavLink component has no exact prop, so it's being passed down to the DOM it seems.

NavLink

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);
}

Solution

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>
  );
};

Updated Solution Code

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 end prop 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>
  );
};
user_86908570
Related