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

【问题标题】：Redirect to another page based on form input in Next.js根据 Next.js 中的表单输入重定向到另一个页面
【发布时间】：2022-01-25 22:21:51
【问题描述】：

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

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

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

任何提示？谢谢！

【问题讨论】：

标签： javascript reactjs forms redirect next.js

【解决方案1】：

要在 Next.js 中处理重定向，您可以使用路由器挂钩 useRouter() 在任何组件中可用，以及 push。你可以在documentation找到一个很好的解释。

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

关于反应形式：react forms

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

【讨论】：

【解决方案2】：

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

首先你可以导入它

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

希望能解决你的问题

【讨论】：

【解决方案3】：

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

}

【讨论】：