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

Posted 2023-02-22

【中文标题】React-Router-DOM 中的 NavLink 组件不接受带有功能的样式道具

【英文标题】：NavLink component in React-Router-DOM not accepting style prop with function

【发布时间】：2022-01-16 13:11:06

【问题描述】：

在 V5 (https://v5.reactrouter.com/web/api/NavLink/style-object-func) 的 React Router Dom 页面上，它声明 style prop 将接受一个函数或一个对象。

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

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

我正在使用 5.2.1 版的 React Router Dom，并检查了 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>

【参考方案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>