Next.js，如何将表单提交到另一个页面？

Question

(Next.js) 我有一页上有一个 GET 表单。我想将它提交到另一个页面。我知道我可以将action 属性设置为另一页。这样可行。但是，它会重新加载页面，而不是仅仅渲染新页面；如果您在页面上有链接而不将其包装在 Link 组件中，则会发生相同的情况。

我可以捕获提交事件，构建查询并将其推送到路由器上。但对于我认为已经解决的问题，这似乎需要做很多额外的工作。

任何想法如何在不重新发明轮子的情况下做到这一点？

<form method='get' action='/search'>
  <input name='q' placeholder='Search' arial-label='Search' />
</form>

Answer 1

我最终捕获了提交事件并将 URL 推送到路由器上。

import {useState} from 'react'
import {useRouter} from 'next/router'

const preventDefault = f => e => {
  e.preventDefault()
  f(e)
}

export default ({action = '/search'}) => {
   const router = useRouter()
   const [query, setQuery] = useState('')

   const handleParam = setValue => e => setValue(e.target.value)

   const handleSubmit = preventDefault(() => {
     router.push({
       pathname: action,
       query: {q: query},
     })
   })

   return (
     <form onSubmit={handleSubmit}>
       <input
         type='text'
         name='q'
         value={query}
         onChange={handleParam(setQuery)}
         placeholder='Search'
         aria-label='Search'
       />
     </form>
   )
}

Answer 2

基于 Next.js 的routing system 和Router API：

Next.js 路由器允许您在页面之间进行客户端路由转换，类似于单页应用程序。提供了一个名为 Link 的特殊 React 组件来执行此客户端路由转换。

Router.push 还处理客户端转换，此方法适用于 next/link 不够用的情况。

因此，您似乎只能通过使用这两种方式中的任何一种来执行客户端转换。

使用上述表单将触发MDN docs 描述的表单提交行为，因为上述规则均不适用：

...然后服务器响应，通常处理数据并加载由 action 属性定义的 URL，导致新页面加载（或刷新现有页面，如果操作指向同一页面）。

我还在 Next.js 的问题板上找到了与您的问题相近的另一个 reference，其中的 preferred method 也是您描述为解决方案的那个。