Next.js Router.push() 自动重新加载页面

Question

有没有一种方法可以在不使用 Next.js 重新加载页面的情况下执行 Router.push()？

我正在为基于 url 呈现不同组件的页面使用 [...all].js 主文件，但我希望能够在不触发完整页面的情况下在它们之间移动重新加载 - 这是一个多步骤表单。

换句话说，我希望能够通过将 URL 从 'form/1' 更新为 'form/2'

来在表单的步骤之间移动

Answer 1

将选项 shallow 设置为 true 以避免页面刷新

router.push('/?step=2', null, { shallow: true })

Answer 2

This page has more on router

router.push(url, as, options)

url - 要导航到

的 URL

as - 将在浏览器中显示的 URL 的可选装饰器。在 Next.js 9.5.3 之前，这用于动态路由，请查看我们以前的文档以了解它是如何工作的

options - 具有以下配置选项的可选对象：

shallow：在不重新运行getStaticProps、getServerSideProps 或getInitialProps 的情况下更新当前页面的路径。默认为 false

您不需要对外部 URL 使用 router.push。 window.location 更适合这些情况

Answer 3

此页面首先出现在 Next.js 和 'page reloads' 上。为了节省其他人一些时间进行故障排除，请考虑以下代码：

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

似乎有一些 Next.JS 的配置会使页面重新加载，即使查询与以前相同，这是实现页面无限循环的简单方法。此外，除非您明确指定路径名，否则浏览器也会重新加载。我在我的服务器上看到了这种行为，但在我的笔记本电脑上却没有，两者都是运行 Next.js 10.1.3。据我所知，唯一的区别是我的笔记本电脑上没有设置 base URL，而服务器确实有 base URL。这解决了问题：

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

据我所知，'shallow' 没什么区别，这也很好用：

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

Answer 4

我也遇到了上述问题，实际添加 {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} 
  />
)

Next.js Router.push() 自动重新加载页面

Next.js Router.push() reloads page automatically

reactjs

react-router

next.js

next-router