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

Question

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

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

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

有什么建议吗？谢谢！

Answer 1

您可以使用 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 2

好的.. 为此，您可以使用 nextjs

提供的 useRouter 钩子

首先你可以导入它

import { useRouter } from "next/router";

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

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


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 3

要处理 Next.js 中的重定向，您可以使用任何组件中可用的路由挂钩 useRouter()，以及 push。您可以在 documentation.

中找到很好的解释

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

关于反应形式：react forms

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

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

Redirect to another page based on form input in Next.js

javascript

forms

redirect

reactjs

next.js