Next.js Router.push() автоматически перезагружает страницу

Есть ли способ выполнить Router.push() без перезагрузки страницы с помощью Next.js?

Я использую основной файл [...all].js для страницы, которая на основе URL-адреса отображает различные компоненты, но я хочу иметь возможность перемещаться между ними, не вызывая полную перезагрузку страницы - это многоэтапная форма.

Другими словами, я хочу иметь возможность перемещаться между этапами формы, также обновляя URL-адрес с 'form/1' на 'form/2'.

Источник

4 ответа

Решение

Add option shallow to true for not refresh page

router.push('/?step=2', null, { shallow: true })
Источник

Эта страница появляется первой на Next.js и при "перезагрузке страницы". Чтобы сэкономить время другим на устранение неполадок, рассмотрите этот код:

      router.push({query: {page: 1}}, undefined, { shallow: true });

Казалось бы, есть некоторые конфигурации Next.JS, которые заставят страницу перезагружаться, даже если запрос будет таким же, как и раньше, что является простым путем к бесконечному циклу перезагрузок страницы. Более того, браузер также перезагрузится, если вы явно не укажете путь. Я наблюдаю такое поведение на своем сервере, но не на своем ноутбуке, оба из которых запускают Next.js 10.1.3. Насколько я могу судить, единственная разница в том, что на моем ноутбуке не установлен базовый URL-адрес, а у сервера есть базовый URL-адрес. Это устраняет проблему:

      let routerOpts = {page: 1};
if (!_.isEqual(routerOpts, router.query)) 
  router.push({pathname: router.pathname, query: routerOpts}, undefined, { shallow: true });

Насколько я могу судить, «мелкий» не имеет значения, и это тоже отлично работает:

      let routerOpts = {page: 1};
if (!_.isEqual(routerOpts, router.query)) router.push({pathname: router.pathname, query: routerOpts})
Источник

Я также столкнулся с вышеупомянутой проблемой, где на самом деле добавление {shallow: true}не было достаточно хорошим решением.

В зависимости от событий, которые у вас есть в элементах ввода формы, таких как: onKeyUpпри нажатии клавиши ввода, например, Вам также может понадобиться вызвать event.preventDefault()чтобы форма не перезагружала страницу и позволяла router.push()делать это дело. Да, Д'О! ;}

      const search = (e) => {
   if ( event.key === 'Enter' && event.target.value) {
      event.preventDefault();
      router.push(`/foo?q=${event.target.value}`, undefined, { shallow: true })
   }
}

return(
  <input 
    ... 
    onKeyPress={search} 
  />
)
Источник

На этой странице есть дополнительная информация о роутере

      router.push(url, as, options)

url - URL-адрес для перехода к

as - Необязательный декоратор для URL-адреса, который будет отображаться в браузере. До Next.js 9.5.3 это использовалось для динамических маршрутов, посмотрите наши предыдущие документы, чтобы увидеть, как это работало.

options - Необязательный объект со следующими параметрами конфигурации:

shallow: обновить путь к текущей странице без повторного запуска getStaticProps, getServerSideProps или getInitialProps. По умолчанию false

Вам не нужно использовать router.push для внешних URL-адресов. window.location лучше подходит для этих случаев

Источник
Другие вопросы по тегам