命令命令版本的next / router无法与Semantic-UI-React配合使用？

Question

根据Next.js docs

  

您还可以使用next / router进行客户端页面转换：

import Router from 'next/router'

function ReadMore() {
  return (
    <div>
      Click <span onClick={() => Router.push('/about')}>here</span> to read more
    </div>
  )
}

export default ReadMore

我实质上是使用Sematic-UI-React将其推算到我自己的示例中

这显然不是我目前的行为。

您有时会看到<Link/>组件或其<Menu.Item/>失去同步。

<Menu.Item/>按照其docs.的工作方式

您可以看到它的表现如何敏捷，但这是通过注释<Link/>标签来实现的。

这是更高的HOC。

   var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isHomeButton, isLoggedIn, logOutUser, route, anchorText, mobile, name, active, handleItemClick }) => {

 comparator = (prevProps, nextProps) => {

  if (prevProps.isHomeButton !== nextProps.setProps.isHomeButton) {
   return true;
  }
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
   return true;
  }
  if (prevProps.mobile !== nextProps.setProps.mobile) {
   return true;
  }
  if (prevProps.name !== nextProps.setProps.name) {
   return true;
  }
  if (prevProps.active !== nextProps.setProps.active) {
   return true;
  }
  return false;
 }

 function currentNav(route, name, active, handleItemClick) {

  // console.log("handleItemClick ", handleItemClick);
  // console.log("active ", active);
  // console.log("name ", name);

/* This is where I extrapolated their imperative version */

function MyLink({children, route}) {
  console.log(`route ${route}`)
  return (
    <>
      <span onClick={() => Router.push(route)}>{children}</span>
    </>
  )
}

  return (
    <MyLink route={route}>
    <Menu.Item
     to={route}
     key={name}
     name={name}
     active={active == name}
     onClick={(e) => {
       handleItemClick(e, { name });
     }
    }
    >
    </Menu.Item>
    </MyLink>
  );

 }

 if (isHomeButton) {
  return currentNav(route, name, active, handleItemClick)
 }
 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  }
  else if (mobile) {
   return currentNav(route, name, active, handleItemClick)
  }
  else if (!(mobile)) {
   return currentNav(route, name, active, handleItemClick)
  }

  else if (anchorText) {
   return <Link href={route}><a>{anchorText}</a></Link>
  }
 } else {
  if (route === "/login") {
   return <Link href="/login"><a>Log in!</a></Link>
  }
  return null
 }
}, comparator);

任何帮助将不胜感激！