Router.push("/") not working inside pages/index.js

Question

I am using Next JS next-auth/react lib and want to redirect users who have authenticated status to dashboard. This is my index.js -

import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { GoogleButton } from "~/components";

export default function Home() {
  const router = useRouter();
  const { data: session, status } = useSession();
  console.log("inside index");

  if (status === "authenticated") {
    console.log("status is:", status);
    router.push("/dashboard/users");
  } else if (status === "unauthenticated") {
    console.log("status is:", status);
    return (
      <>
        <Head>
          <title>Login</title>
        </Head>
        <div className="mt-72 text-center">
          <GoogleButton />
        </div>
      </>
    );
  } else if (status === "loading") {
    console.log("status is:", status);
    return <p>loading</p>;
  }
}

My pages/_app.js is -

import { SessionProvider } from "next-auth/react";
import "antd/dist/antd.css";

import "../styles/globals.css";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

NOTE - My index page does route to /dashboard/users but it displays blank and this error in console.

Also, when I refresh the route again, it displays the page just fine (/dashboard/users page is perfectly working but routing from index isn't).

I simply want to redirect my logged in users to dashboard, but when I go to my index page, I get this error-

The above error occurred in the component:

at Home (webpack-internal:///./src/pages/index.js:26:72)  
at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:417:24)  
at MyApp (webpack-internal:///./src/pages/_app.js:71:28)  
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)  
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)  
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:332:9)  
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:766:26)  
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:883:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

score -2 · Accepted Answer · answered Oct 19 '22 at 17:48

-2

You can try something like this.

import {useEffect} from 'react';
import Link from "next/link";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { GoogleButton } from "~/components";

export default function Home() {
  const router = useRouter();
  const { data: session, status } = useSession();
  console.log("inside index");

  useEffect(() => {
    if(status === 'authenticated') {
      router.push('/dashboard/users')
    }
  }, [status])


  if(status === 'loading') {
    return <p>loading</p>;
  }else if(status === 'unauthenticated') {
    return (
      <>
        <Head>
          <title>Login</title>
        </Head>
        <div className="mt-72 text-center">
          <GoogleButton />
        </div>
      </>
    );
  }else {
    return <div/>
  }
}

answered Oct 19 '22 at 17:48

Dulaj Ariyaratne

998
1
6
13

Helpful answers also explain what it is the OP should trying exactly, and why that change helps. Answering with a bunch of code, most of which not being relevant to the solution and no explanation isn't so helpful. – Webber Oct 19 '22 at 17:53
Hi @Dulaj, thankyou for the answer. Were you able to find out that why my coe of solution is emitting wrong results? What mistake did I made? And Why is router.push not working without a useEffect? – Anchal Gupta Oct 20 '22 at 05:36
Yes, it did solved my issue. Also, window.location is also working fine on my end, but I want to understand that why is my code causing issues? I followed docs and I don't understand what mistake I did. Why useEffect is required to trigger router.push? – Anchal Gupta Oct 20 '22 at 08:48
Simply it's like this. React component expects a React Node to be returned. You cannot use router.push as like that as it doesn't return any React Node. – Dulaj Ariyaratne Oct 20 '22 at 10:52

Router.push("/") not working inside pages/index.js

1 Answers1