使用React Router减少Route rerenders的数量

Question

我目前正在构建一个中等大小的Web应用程序，今天我检查了组件树的更新–对于我没有想到的大量组件重新渲染，我感到非常震惊。我不想在此发布所有问题，但也许其中一个的解决方案可能会解决其他问题。

在我的Web应用程序中，我具有以下导航链接代码，该链接应显示访问者当前是否是该页面的URL。当我浏览Web应用程序时，它每次都会重新渲染，而不仅是在状态更改时。我该如何解决？

const LinkedItem = ({ children, to, disabled = false }) => (
  <Route path={to} children={({ match }) => {
    if (match == null) {
      return (
        <li className="nav-item">
          <Link className={`nav-link ${disabled ? "disabled" : ""}`} to={to}>{children}</Link>
        </li>
      );
    } else {
      return (
        <li className="nav-item">
          <Link className={`nav-link active ${disabled ? "disabled" : ""}`} to={to}>{children} <span className="sr-only">(current)</span></Link>
        </li>
      );
    }
  }} />
);