<Form> component still reloads page after submission (closed)

[xsky13]

I'm making a signup page, and for the form, I'm using the <Form> component. Its supposed to stop the page from reloading when the form is submitted, but it still reloads the page. Here's my code:

import { PrismaClient } from "@prisma/client";
import { ActionFunction, Form, useActionData, useTransition } from "remix";
import { badRequest, createdAt } from "~/utils/utils";
const db = new PrismaClient();

const validateName = (name: string) => {
    if (name.length <= 3 || name.length >= 40) {
        return "Su nombre debe tener entre 3 y 40 caracteres";
    }
}

const validateEmail = (email: string) => {
    if (!email.match(/^\S+@\S+\.\S+$/)) {
        return "El email no es válido";
    }
}

const validatePassword = (password: string) => {
    if (password.length <= 6 || password.length >= 40) {
        return "La contraseña debe tener entre 6 y 40 caracteres";
    }
}

export const action: ActionFunction = async ({ request }) => {
    const form = await request.formData();
    const name = form.get("name");
    const email = form.get("email");
    const password = form.get("password");

    if (typeof name !== "string" || typeof email !== "string" || typeof password !== "string") {
        return badRequest({
            formError: `Form not submitted correctly.`,
        });
    }

    const emailExists = await db.user.findFirst({
        where: { email }
    });

    const fieldErrors = {
        name: validateName(name),
        email: validateEmail(email),
        password: validatePassword(password),
    };

    const fields = { name, email, password, createdAt };

    if (emailExists) {
        return badRequest({
            formError: `Email already exists.`,
        });
    }

    if (Object.values(fieldErrors).some(Boolean)) {
        return badRequest({ fieldErrors, fields });
    }

    return await db.user.create({ data: fields });
};

const Registrarse = () => {
    const actionData = useActionData();
    const transition = useTransition();

    return (
        <div className="flex justify-center items-center h-full">
            <Form method="post" className="mx-6 sm:mx-0 w-96">
                <h1 className="h1 my-3">Registrarse</h1>
                <fieldset
                    disabled={transition.state === "submitting"}
                >
                    <div>
                        <input
                            type="text"
                            name="name"
                            className='w-full py-2.5 px-5 border border-gray-300 bg-transparent focus:outline-none my-1'
                            defaultValue={actionData?.fields?.name}
                            placeholder='Nombre'
                        />
                        {
                            actionData?.fieldErrors?.name ?
                                <p role="error" className="text-red-600">
                                    {actionData.fieldErrors.name}
                                </p>
                                : null
                        }
                    </div>
                    <div>
                        <input
                            type="text"
                            name="email"
                            className='w-full py-2.5 px-5 border border-gray-300 bg-transparent focus:outline-none my-1'
                            defaultValue={actionData?.fields?.email}
                            placeholder='Email'
                        />
                        {
                            actionData?.fieldErrors?.email ?
                                <p role="error" className="text-red-600">
                                    {actionData.fieldErrors.email}
                                </p>
                                : null
                        }
                    </div>
                    <div>
                        <input
                            type="password"
                            name="password"
                            className='w-full py-2.5 px-5 border border-gray-300 bg-transparent focus:outline-none my-1'
                            defaultValue={actionData?.fields?.password}
                            placeholder='Contraseña'
                        />
                        {
                            actionData?.fieldErrors?.password ?
                                <p role="error" className="text-red-600">
                                    {actionData.fieldErrors.password}
                                </p>
                                : null
                        }
                    </div>
                    {
                        actionData?.formError ?
                            <p className="text-red-600" role="error">
                                {actionData.formError}
                            </p>
                            : null
                    }
                    <button type="submit" className="btn-dark mt-3">
                        {
                            transition.state === "submitting"
                                ? "..."
                                : "Registrarse"
                        }
                    </button>
                </fieldset>
            </Form>
        </div>
    );
};

export default Registrarse;

Edit:
I also found out that the <Link> component is also reloading a page instead of redirecting me to it. Any help?

[kiliman]

Did you add the <Scripts/> component to your root? Remix will render standard <form> and <a> so without JavaScript, they will do full page POST and GET.

[kiliman]

What version of Remix are you running? That definitely seems wrong.

[xsky13]

I don't know. How can I check?

[sairajchouhan]

Check version of remix in package.json

[xsky13]

1.2.3

[machour]

Please post the contents of your root.tsx file