как прослушивать изменения страницы в nextjs

#javascript #reactjs #react-hooks #next.js #next-router

#javascript #reactjs #реагирующие хуки #next.js #далее -маршрутизатор

Вопрос:

Я хочу повторно использовать меню, которое я создал в react с помощью react-router-dom, но на этот раз в nextjs. Цель состоит в том, чтобы изменить состояние меню на «false», а название меню на «menu», когда я нажимаю на ссылку внутри меню.

Я использую функцию useEffect для прослушивания истории :

 //use effect for page changes
  useEffect(() => {
    //listen for page changes
    history.listen(() => {
      setState({ clicked: false, menuName: "Menu" })
    })
  })

и завернул мой компонент с помощью withRouter :

 import { withRouter } from 'next/router'
[...]
export default withRouter(Header);

К сожалению, он печатает :

 TypeError: Cannot read property 'listen' of undefined

Должен ли я лучше использовать ‘useRouter’ для решения этой проблемы? Как?

Спасибо 😉

Ответ №1:

Это сработало именно так :

Nextjs: события маршрутизатора

 import { useRouter } from "next/router";

...

const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log(
        `App is changing to ${url}`
      )
      setState({ clicked: false, menuName: "Menu" })
    }

    router.events.on('routeChangeStart', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
  }, [])