Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – useRouter() is not redirecting to the landing page

"use client"
import { useState } from 'react';
import {auth} from '../../firebase-config'
import {createUserWithEmailAndPassword} from 'firebase/auth'
import { useRouter } from 'next/router';
const SignUp = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const handleSubmit = (e) => {
       const router = useRouter();
        
        e.preventDefault();
        // Handle form submission here (e.g., send data to server)
        createUserWithEmailAndPassword(auth , email,password)
        .then(()=>{
            setEmail('');
            setPassword('');
            router.push('/')
        }).catch((err)=>{
            throw console.log(err);
        })
    }

I have used useEffect hook , windows.location.href , I have restarted my server but nothing works.
I want the user to redirect to landing page but it seems nothing is working.

Tags:

2

Answers


  1. 0

    In your current implementation, the useRouter() hook is being called inside the handleSubmit function, which is likely causing issues with the routing. In Next.js, hooks need to be called at the top level of your component, not within any callbacks or nested functions.

    const SignUp = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const router = useRouter();

    const handleSubmit = (e) => {
       ...
    }
...
    Login or Signup to reply.
  2. 0

    Move this line const router = useRouter(); right after importing it, calling it inside the SignUp is restriciting its usage. router needs to be accessable at the top level.

    "use client"
import { useState } from 'react';
import {auth} from '../../firebase-config'
import {createUserWithEmailAndPassword} from 'firebase/auth'
import { useRouter } from 'next/router';
const router = useRouter();
const SignUp = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const handleSubmit = (e) => {
      ...
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search