NAVLINK 的 React Route 收到非布尔属性的 TRUE

Question

我正在使用 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>)};

我在我的控制台中收到一条警告说

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

知道如何解决吗？我尝试了其他堆栈溢出细节，但无法得出任何结论。

Answer 1

在 react-router-dom@6 中，NavLink 组件没有 exact 属性，因此它似乎被传递给 DOM。

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

解决方案

解决方案是从您的代码中删除 exact 属性，因为它对您没有任何作用。

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

更新了解决方案代码

因为您似乎正在为主页呈现一个 link 并且您不希望它也匹配子路由，请使用 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>
  );
};

NAVLINK 的 React Route 收到非布尔属性的 TRUE

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

javascript

reactjs

react-router

react-router-dom

解决方案

更新了解决方案代码