Why redirect not working in next.js application?

Question

I am new to next.js and i have an application built on top of it. I run a timer of 10 seconds on the homepage and when the timer reaches 0 I want otredirect user to a feedpack page in my pages folder.

Code for the same:

if(timer==0)
  {
    navigate('/feedback')
    clearTimeout(time);
  }

I am using useNavigate hook here and it gives me the following error:

useNavigate() may be used only in the context of a <Router> component.

Next.js come with its [own built-in router](https://nextjs.org/docs/api-reference/next/router). You shouldn't use `react-router-dom` in a Next.js app. See https://nextjs.org/docs/migrating/from-react-router. — juliomalves, May 30 '22 at 22:57
The `useNavigate` hook can only be used within a `react-router-dom` routing context. If you want to use client-side routing you'll need to fully implement a client-side router. — Drew Reese, May 31 '22 at 17:41

score 4 · Accepted Answer · edited Apr 08 '23 at 02:32

4

Here you can read more about this error

What you need is to use useRouter hook.

import { useRouter } from "next/router";

function ComponentName() {
  const router = useRouter();
  if(timer==0) {
    router.push('/feedback')
    clearTimeout(time);
  }
  return (...);
}

edited Apr 08 '23 at 02:32

Amin Mashayekhan

397
4
14

answered May 30 '22 at 19:06

Pakira

1,951
3
25
54

I did that and it works, but it gives me a 404 error saying page not found. Although I have created feedback.tsx file in the pages folder – Vatsal A Mehta May 31 '22 at 04:49

Why redirect not working in next.js application?

1 Answers1