Imperative version of next/router not working with Semantic-UI-React?

问题

According to the Next.js docs

You can also do client-side page transitions using 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

I am essentially extrapolating that to my own example with Sematic-UI-React:

This my current behavior which is obviously is not desired.

You can see at some point the <Link/> component or perhaps its the <Menu.Item/> falls out of sync.

This is how the <Menu.Item/> works as per their docs.

You can see how snappy it's behaving, but that's with the <Link/> tag commented out...

This is the greater 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);

Any help would be appreciated!

来源：https://stackoverflow.com/questions/58653701/imperative-version-of-next-router-not-working-with-semantic-ui-react

标签

javascript

reactjs

routing

next.js

semantic-ui-react