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

【问题标题】：Next.js Router.push() reloads page automaticallyNext.js Router.push() 自动重新加载页面
【发布时间】：2020-07-22 14:20:02
【问题描述】：

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

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

换句话说，我希望能够通过将 URL 从“form/1”更新为“form/2”来在表单的步骤之间移动

【问题讨论】：

标签： reactjs react-router next.js next-router

【解决方案1】：

将选项 shallow 添加为 true 以不刷新页面

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

【讨论】：

@FrancescoS 请设置回答。谢谢
在router.push('/?step=2', null, { shallow: true }) 中使用 null 可能会导致 TypeError: Cannot read property 'auth' of null。最好使用未定义。 router.push('/?step=2', undefined, { shallow: true })

【解决方案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。默认为假

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

【讨论】：

【解决方案3】：

此页面首先出现在 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})

【讨论】：

【解决方案4】：

我也遇到了上述问题，实际上添加{shallow: true} 并没有足够好的解决方案。

根据您在表单输入元素上的事件，例如：onKeyUp 按回车键，例如，您可能还需要调用 event.preventDefault() 以防止表单重新加载页面并允许 @987654324 @去做这件事。是的，德哦！ ;}

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} 
  />
)

【讨论】：