Nextjs -如何根据获取请求将用户重定向到另一个页面

Question

我有一个nextjs页面与一个表单，用户将提交一个邮政编码。

页面然后向API端点发出fetch请求并获得JSON结果。

我想重定向用户到一个不同的页面在我的nextjs网站基于该API调用的结果。

这是我目前所拥有的:(FORM)

<form onSubmit={submitPostCode}>
<input className={style.inputfield}
type="text"
id="postCode"
name="postCode"
placeholder="What's your post code?"
required />
<button type="submit" className={style.findMyAddressBtn}>
FIND MY ADDRESS
</button>
</form>

单击处理程序:

const submitPostCode = async (event) => {
try {
const router = useRouter();
event.preventDefault();
const postCode = event.target.postCode.value;
const res = await fetch(`https://api.postcodes.io/postcodes/${postCode}`);
const result = await res.json();
router.push('/some-path/' + result.area);
} catch (e) {
}

};

Answer 1

让我们试试下面的代码:

const router = useRouter();
const submitPostCode = async (event) => {
event.preventDefault();
try {
const postCode = event.target.postCode.value;
const res = await fetch(`https://api.postcodes.io/postcodes/${postCode}`);
const result = await res.json();
if(result.area){
router.push(`/some-path/${result.area}`);
}else{
console.log("failed to redirect")
}

} catch (error) {
console.log(error)
}

};