Javascript 为什么在react路由器dom 6中使用导航导致浪费渲染

我使用新的路由器-dom@6.0.0-beta.0

有一个布局：

export function Layout() {
  return (
    <div>
      <TopBar />
      <div>
        click on view2, view1 links and look at console
        <Outlet />
      </div>
    </div>
  );
}

导出函数布局（）{
返回(
单击view2、view1链接并查看控制台
);
}

使用纯组件顶栏：

const TopBar = () => {
  const navigate = useNavigate(); //This line 1

  const onLogout = () => {
    navigate("/");  //This line 2
  };

  return (
    <div>
      {console.log("TOPBAR")}
      <button onClick={onLogout}>out</button>
    </div>
  );
};
export default React.memo(TopBar);

const-TopBar=（）=>{
const navigate=useNavigate（）；//这一行1
常量onLogout=（）=>{
导航（“/”；//这一行2
};
返回(
{console.log（“TOPBAR”）}
出来
);
};
导出默认的React.memo（顶栏）；

和包含两个相互链接的页面的容器：

export const View1 = () => {
  return (
    <div>
      <Link to="/view2">view2</Link>;
    </div>
  );
};

export const View2 = () => {
  return (
    <div>
      <Link to="/">view1</Link>
    </div>
  );
};

export const View1=（）=>{
返回(
视图2；
);
};
导出常量视图2=（）=>{
返回(
视图1
);
};

当我点击页面链接时，返回TopBar execute（控制台日志TopBar）的fn，但当我从TopBar（我在组件中注释）中删除这两行时，它不会发生

TopBar和容器是分开的，我不想在容器中的某些内容发生变化时渲染，我知道react比较虚拟dom和不渲染实际dom，但TopBar是纯的，没有理由再次执行，我认为useNavigate钩子会导致TopBar上的渲染浪费，对不对？如果是，我该怎么办