根据Next.js中的表单输入重定向到另一个页面

Question

我刚刚开始接触 Next.js 和 SPA 世界。我已经习惯了 PHP 和纯 JS，所以这对我来说是全新的。

所以我有一个基本上带有文本输入和提交按钮的表单。我需要做的就像根据用户提交的文本字段重定向用户一样简单，但我不知道如何做。

例如：表单在首页，用户输入“foo”并提交。结果应该是用户被重定向到“/channel/foo”。

有什么建议吗？谢谢！

Answer 1

好的.. 为此，您可以使用 nextjs 提供的 useRouter 钩子

首先你可以导入它

import { useRouter } from "next/router";

然后你可以创建它的实例并使用它来将反应应用程序推送到新路线 基于给定表单输入值的值

这里我使用反应状态去新路线

import {useRouter} from 'next/router'
import {useState} from 'react'
export default function SampleComponent(){
    const router = useRouter()
    const [route, setRoute] = useState()
    const handleSubmit = (e) => {
        e.preventDefault()
        router.push("someBasePath/" + route)
    }
    return(
        <div>
            <h1>Example Form</h1>
            <form onSubmit={handleSubmit}>
                <input type="text" name='route' onChange={(e)=>{setRoute(e.target.value)}} />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

我希望你熟悉react和useState hook

希望能解决你的问题

Answer 2

您可以使用 useRouter 钩子导航到另一个页面。例如：

import { useRouter } from "next/router";

const Component = () => {

  const [inputValue, setInputValue] = useState("");
  const router = useRouter();
  
  const onChange = e => {
    setInputValue(e.target.value);
  }

  const handleSubmit = e => {
    e.preventDefault();
    router.push(`/channel/${inputValue}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={onChange} />
    </form>
  )

}

Answer 3

要处理 Next.js 中的重定向，您可以使用任何组件中可用的路由器钩子

useRouter()

以及

push

。您可以在文档中找到很好的解释。

根据您处理表单的方式，您可以在按钮上进行回调，或者使用表单的

onSubmit

进行处理。

关于反应形式：反应形式

关于在 React 中处理按钮点击：react 按钮

Answer 4

用这个技巧使其成为服务器端：

page.tsx(.jsx)

<form action="/yourCustomPath">
 <input type="text" name="user-input" />
 <button type="submit"> Submit </button>
</form>

在 next.js middleware.ts(.js) 文件中

export function middleware(request) {
    if (request.nextUrl.pathname === `/yourCustomPath`) {
      const userInput = request.nextUrl.searchParams.get("user-input");
      return Response.redirect(new URL(`/yourCustomPath/${userInput}`, request.nextUrl))
    }
}