nextjs <form> 组件

37 阅读1分钟

新的

组件通过预取、客户端导航和渐进式增强扩展了HTML元素。

它对于导航到新页面的表单很有用,例如指向结果页面的搜索表单。

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}
组件附带:

预取:当表单在视图中时,布局和加载UI被预取,使导航快速。 客户端导航:提交时,共享布局和客户端状态将被保留。 渐进式增强:如果JavaScript尚未加载,表单仍然可以通过全屏导航工作。