我剛剛開始使用 Next.js 和 SPA 世界。我習慣了 PHP 和普通的 JS，所以這對我來說是全新的。
所以我有一個基本上帶有文本輸入和提交按鈕的表單。我需要做的就像根據用戶提交的文本欄位重定向用戶一樣簡單，但我不知道如何做。
例如：表單在首頁，用戶輸入“foo”并提交。結果應該是用戶被重定向到“/channel/foo”。
任何提示？謝謝！
uj5u.com熱心網友回復：
您可以使用 useRouter hook，導航到另一個頁面。例如：
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>
)
}
uj5u.com熱心網友回復：
好的.. 為此，您可以使用 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
我希望它能解決你的問題
uj5u.com熱心網友回復：
要在 Next.js 中處理重定向，您可以使用useRouter()任何組件中可用的路由器掛鉤，并帶有push. 您可以在檔案中找到很好的解釋。
根據您處理表單的方式，您可以對按鈕進行回呼，或者使用onSubmit表單的 來處理它。
關于反應形式：反應形式
關于在 React 中處理按鈕點擊：react buttons
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/394524.html
標籤：javascript 反应 形式 重定向 下一个.js