根据 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>
  )

}