Блог

Мне нужно перейти между 2 маршрутами в приложении NextJS, таком как в следующем примере:

 FROM: /some-route?id=ID_1 TO: /some-route?id=ID_1amp;page=2  

И у меня есть useEffect , который делает что-то вроде этого:

• Следует увольнять за любые id изменения
• Использует router.push по какой-то причине

 import { useRouter } from 'next/router';  const { query, push } = useRouter(); const { id } = query;   useEffect(() =gt; {  try {  fetchDataFor(id);  }  catch(err) {  push('/not-found');  } },[id,push]);  

Проблема, с которой я сталкиваюсь, связана с тем фактом, что весь router объект изменится после обновления маршрута, и мой эффект повторится из-за push изменения ссылки на метод, хотя мой id не меняется.

В настоящее время мне нужно проверить, был ли id он обновлен или нет, используя некоторую useRef переменную, которая отслеживает предыдущее значение. Это громоздко.

Я подумал, что, возможно, мне следует использовать динамический маршрут, например:

 /some-route/[id] /some-route/[id]?page=2  

Но я предполагаю, что проблема останется из-за push свойства, которое будет продолжать меняться из-за изменения строки запроса.

Другим вариантом было бы исключить push метод из массива зависимостей useEffect. Но это похоже на анти-паттерн.

Каков был бы наилучший подход к решению этой проблемы?

Цель здесь состоит в том, чтобы иметь возможность использовать router.push (или, по крайней мере, каким-то образом продвигать другой маршрут) внутри useEffect , который должен запускаться только для query.id обновлений.