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

Question

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

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

有什么想法可以在不重新发明轮子的情况下做到这一点吗？

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

Answer 1

基于 Next.js' routing system and Router API:

The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application. A special React component called Link is provided to do this client-side route transition.

Router.push also handles client-side transitions, and this method is useful for cases where next/link is not enough.

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

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

...The server then responds, generally handling the data and loading the URL defined by the action attribute, causing a new page load (or a refresh of the existing page, if the action points to the same page).

我还发现了另一个 reference close to your question in Next.js' issues board, where the preferred method 可以遵循，你也将其描述为解决方案。

Answer 2

我最终捕获了提交事件并将 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>
   )
}

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

Next.js, how to submit a form to another page?

javascript

reactjs

next.js