reactjs - 如何防止react-router-dom Link组件重新渲染？

Question

我试图限制每次用户单击某些内容时在我的应用程序上重新渲染的组件数量。鉴于无论用户位于哪个页面，侧边栏都会呈现，因此将其包装在 React.memo 中似乎是有意义的。功能。这效果很好，侧边栏组件本身似乎没有重新渲染。然而，<Link>元素，我从 react-router-dom 导入重新渲染，就像SidebarAuthButtons一样和 SidebarCreateButton .

我可以采取什么措施来防止这种行为？

import React, { memo } from "react";
import { Link } from "react-router-dom";
import {
  SidebarContainer,
  SidebarLogo,
  SidebarNav,
  SidebarMenu,
  SidebarListItem,
  SidebarButton,
} from "../styles/SidebarStyles";

function Sidebar({ auth }) {
  const SidebarAuthButtons = (
    <div>
      <SidebarButton>
        <Link to="/login">Log In</Link>
      </SidebarButton>
      <SidebarButton outlined={true}>
        <Link to="/register">Create Account</Link>
      </SidebarButton>
    </div>
  );

  const SidebarCreateButton = (
    <SidebarButton>
      <Link to="#">Create</Link>
    </SidebarButton>
  );

  return (
    <SidebarContainer>
      <SidebarLogo>React Project</SidebarLogo>
      <SidebarNav>
        <SidebarMenu>
          <SidebarListItem isHeading={true}>Menu</SidebarListItem>
          <SidebarListItem>
            <Link to="/">Explore</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/blogs">Blogs</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/podcasts">Podcasts</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/youtube">Youtube</Link>
          </SidebarListItem>
        </SidebarMenu>
        {auth.isAuthenticated ? SidebarCreateButton : SidebarAuthButtons}
      </SidebarNav>
    </SidebarContainer>
  );
}

export default memo(Sidebar);

Answer 1

将 SidebarAuthButtons 和 SidebarCreateButton 移到功能组件渲染范围之外，使它们成为 React 组件(目前它们只是保存到变量中的 jsx)。这应该可以修复重新渲染问题。