Является ли ошибка «EventSource сбой загрузки: GET» http://localhost:8016/_next/webpack-hmr?page=/" причиной моей проблемы с компонентом Link в Next.js? - PullRequest
Новая
       45

Является ли ошибка «EventSource сбой загрузки: GET» http://localhost:8016/_next/webpack-hmr?page=/" причиной моей проблемы с компонентом Link в Next.js?

0 голосов
/ 30 октября 2019

Я пытаюсь реализовать этот пункт меню с помощью компонента Link в Next.js.

Это мое текущее поведение, которое, очевидно, нежелательно.

enter image description here

В какой-то момент вы можете увидеть компонент <Link/> или, возможно, его <Menu.Item/> не синхронизирован.

ЭтоВот как <Menu.Item/> работает в соответствии с их документами .

Вы можете видеть, как быстро он ведет себя, но это с закомментированным тегом <Link/> ...

enter image description here

Это больше 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) {

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

 }

 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);

В документах Next.js они рекомендуют использовать императивный подход.

Вот как я реализовал это в моем случае.

Функция-обработчик в классе ... 

handleItemClick = (e, { name }) => {
  if (name.includes('home')) name = ''
  Router.push('/' + name); this.setState({ activeItem: name })}

И вот как я его использую: 

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

 console.log("route ", route);
  return (

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

 }

Итак, пробуя этот подход, я заметил это в консоли.

EventSource failed loading: GET "http://localhost:8016/_next/webpack-hmr?page=/".

Опять же, изменение маршрута / страницы работает отлично, это просто активныйгосударство из СеманаTic-UI-реагировать, который не синхронизирован.

Любая помощь будет признательна!

...