How to redirect in Next.Js (CLIENT SIDE)

Question

I'm trying to make a redirect if the user has a token saved in cookies or not, here's my code:

const Secret = () => {
  const router = useRouter();
  const [token] = useState({
    token: cookies.get("token") || null,
  });
  if (token.token == null || token.token.hasOwnProperty("error")) {
    router.push("/login");
  } else {
    router.push("/");
  }
  return (
    <>
      <h1>Secret</h1>
    </>
  );
};

But I get this error: No router instance found. you should only use "next/router" inside the client side of your app. Anyone knows how to fix it? Thanks!

tmhao2005 · Accepted Answer · 2020-08-13 05:43:14Z

4

I think the problem coming from where you put the code in. Your condition is supposed to be happened as the component is mounted, so try this:

React.useEffect(() => {
 if (token.token == null || token.token.hasOwnProperty("error")) {
    router.push("/login");
  } else {
    router.push("/");
  }
}, [])

answered Aug 13, 2020 at 5:43

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to redirect in Next.Js (CLIENT SIDE)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related