Javascript React重画列表中使用NextJS中的useRouter的所有元素

在我的新应用程序中，我使用React和NextJS。应用程序有一个html列表元素，其中包含当页面处于活动状态时高亮显示的项目。单击此列表中的某个项目时，您将进入另一个页面。查看分析器，我注意到列表中的所有元素都被重新绘制，尽管只有2个元素应该被重新绘制

在此组件中开始重绘

export const SidebarOrganizationsListItemLink: React.FC<SidebarOrganizationsListItemLinkProps> = (props) => {
  const { className: classNameProp, data: { organization }, ...restProps } = props;
  const classes = useStyles()
  const router = useRouter()

  const active = React.useMemo(() => {
    const { organizationId } = router.query

    return organizationId === organization.id
  }, [router, organization.id])
  const className: string = React.useMemo(() => {
    return clsx(classes.root, { [classes.active]: active }, classNameProp)
  }, [classes, classNameProp, active])

  return (
    <ButtonLink {...restProps} className={className}>
      <Badge color="secondary" overlap="circle" badgeContent={organization.badgeContent}>
        <Avatar className={classes.avatar}>{organization.alt}</Avatar>
      </Badge>
    </ButtonLink>
  )
}

export const SidebarOrganizationsListItemLink:React.FC=（props）=>{
const{className:classNameProp，数据：{organization}，…restProps}=props；
常量类=useStyles（）
const router=useRouter（）
const active=React.useMoom（（）=>{
const{organizationId}=router.query
返回organizationId==organization.id
}，[router，organization.id]）
const className:string=React.useMoom（（）=>{
返回clsx（classes.root，{[classes.active]：active}，classNameProp）
}，[classes，classNameProp，active]）
返回(

为什么会发生这种情况以及如何避免这种情况？
您正在使用React.usemo包装SidebarOrganizationsList组件。根据usemo，它将返回一个已记忆的值，但似乎不会传入依赖项数组

如果未提供数组，则将在每次渲染时计算新值

谢谢你的回答，但我用的是React.memo，不是React.useMoom在这种情况下，你有什么理由不能只用React.useMoom吗？