8

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

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

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

4

4 回答 4

19

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

router.push('/?step=2', null, { shallow: true })
于 2020-04-09T21:19:54.420 回答
0

此页面有更多关于路由器的信息

router.push(url, as, options)

url - 要导航到的 URL

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

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

shallow：更新当前页面的路径，不重新运行 getStaticProps、getServerSideProps 或 getInitialProps。默认为假

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

于 2021-02-02T20:34:50.377 回答
0

此页面首先出现在 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})
于 2021-05-18T22:31:35.873 回答
0

我也遇到了上述问题，实际上添加{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} 
  />
)
于 2021-11-24T21:06:26.747 回答