After the user submits a form, I want to redirect them to a thank you page. However, when the backend logic is processed, it redirects me to a 404 page. I checked the URL path and everything seems fine.

My project is structured like this: app -> pages -> ThankYou.tsx

Everything is happening in the FormFile.tsx which is located in the form directory inside of components.

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

Here is how things look:

***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"
...

Even when I enter this in the URL to test how ThankYou.tsx will look like, I get a 404…

http://localhost:3000/pages/ThankYou

Incase your wondering, this is what ThankYou.tsx looks like for now…

import React from 'react'

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

export default ThankYou