React-Router-DOM 中的 NavLink 组件不接受带有 function 的样式道具

Question

在 V5 ( https://v5.reactrouter.com/web/api/NavLink/style-object-func ) 的 React Router Dom 页面上，它声明 style 属性将接受 function 或 ZA669CFDE6311BD5BEB26

当我尝试传递文档中列出的样式 function 时，我收到以下控制台错误：

失败的道具类型：提供给NavLink的function类型的道具style无效，预期object

我正在使用 React Router Dom 的 5.2.1 版本，并检查了 React Router V5 的 github 页面，似乎 PropTypes 已正确列出（ https://github.com/remix-run/react-router/blob/v5 /packages/react-router-dom/modules/NavLink.js ）

这是我的代码：

 <NavLink to={"/"} style={isActive => ({ color: isActive? "green": "blue" })} > {"hello"} </NavLink>

Answer 1

似乎这可能是react-router-dom及更早版本的 v5.2.x 中的错误。 使用 v5.3.0 ( latest ) 似乎没有这个问题。 快速搜索react-router-dom github 问题并没有发现任何问题。

例子：

import { BrowserRouter as Router, NavLink } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <NavLink
              exact
              to={"/"}
              style={(isActive) => ({
                color: isActive ? "green" : "blue"
              })}
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              exact
              to={"/test"}
              style={(isActive) => ({
                color: isActive ? "green" : "blue"
              })}
            >
              Test
            </NavLink>
          </li>
        </ul>
      </div>
    </Router>
  );
}

在 v5.2.1 中仍然有效的是activeStyle道具。

<NavLink
  exact
  to={"/"}
  style={{ color: "green" }}
  activeStyle={{ color: "blue" }}
>
  Home
</NavLink>