What could avoid Nextjs router to push the url I provided but params instead?-CodePudding

I have a very simple form for selecting a payment method built with Nextjs :

 <form className='mx-auto max-w-screen-md' onSubmit={submitHandler}>
                {
                    ["Credit Card", "Paypal"].map((payment: string) => (
                        <div key={payment} className="mb-4">
                            <input
                                name='paymentMethod'
                                className='p-2 outline-none focus:ring-0'
                                id={payment}
                                type="radio"
                                checked={selectedPaymentMethod === payment}
                                onChange={() => setSelectedPaymentMethod(payment)}
                            />
                            <label className='p-2' htmlFor={payment}>
                                {payment}
                            </label>
                        </div>
                    )
                    )}
                <div className='mb-4, flex justify-between'>
                    <button
                        onClick={() => router.push('/shipping')}
                        type='button'
                        className='default-button'
                    >
                        Back
                    </button>
                    <button
                        className='primary-button'
                    >
                        Confirm
                    </button>
                </div>
            </form>

Then here's the javascript for the submitHandler :

const router = useRouter();
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('');
const { state, dispatch } = useContext(Store);

const submitHandler = (e: any) => {
    e.prevent.default();

    dispatch({ type: 'SAVE_PAYMENT_METHOD', payload: selectedPaymentMethod });

    Cookies.set({
        ...cart,
        paymentMethod: selectedPaymentMethod
    });

    router.push('/placeorder');
};


The problem occurs when it comes to push the new route '/placeorder'.

Clicking on the confirmation button doesn't bring me to the '/placeorder' route but instead, it pushes a question mark, the input name and "=on" in the url, like so :

http://localhost:3000/payment?paymentMethod=on

It's a bit different if I don't select anything prior clicking on the confirm button, it just pushes a question mark :

http://localhost:3000/payment?

There's nothing I can find related to this issue on internet. The piece of code is from a tutorial, I compared it , but it's the exact same thing.

CodePudding user response：

replace e.prevent.default() with e.preventDefault()