为什么我在使用 useRouter 时遇到 404 页面未找到？

Question

用户提交表单后，我想将他们重定向到感谢页面。然而，当后端逻辑被处理时，它会将我重定向到 404 页面。我检查了 URL 路径，一切似乎都很好。

我的项目结构如下：

app -> pages -> ThankYou.tsx

一切都发生在 FormFile.tsx 中，它位于组件内部的表单目录中。

(

app -> components -> form -> FormFile.tsx

)

事情是这样的：

***IMPORT STATEMENTS/ FORM SCHEMA AT THE TOP***


const FormFile = () => {   
const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      firstName: '',
      lastName: '',
      email: '',
      numberOfKids: 0
    }   })   

    const router = useRouter();   

    const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
      console.log(values);
      const response = await axios.post('/api/formInput', values)
      router.push('/ThankYou'); //This is supposed to redirect the user to ThankYou.tsx
    } catch (error) {
      console.log(error);
    }   };

  return (
    <>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit, (errors) => console.log(errors))}>
          {/* FIRST NAME */}
          <FormField
            control={form.control}
            name="firstName"
...

即使我在 URL 中输入此内容来测试ThankYou.tsx 的外观，我也会收到 404...

http://localhost:3000/pages/ThankYou

如果您想知道，这就是ThankYou.tsx 现在的样子...

import React from 'react'

const ThankYou = () => {
  return (
    <div>ThankYou</div>
  )
}

export default ThankYou

Answer 1

检查你的router-DOM，是否安装成功，还要检查版本，如果react-router-dom安装良好，然后检查api并控制台错误，问题仍然存在。您介意分享更多详细信息以便更好地理解此错误吗？