Stack Overflow
Stack Overflow

Questions tagged [next-router]

next/router is a library provided by Next.js. Use this tag if you need help with the useRouter hook, the withRouter HOC, or with the extracted information from the router object.

293 questions
73
votes
8 answers

NextRouter was not mounted Next.JS

Using import { useRouter } from "next/router"; as import { useRouter } from "next/navigation"; throws "Argument of type '{ pathname: string; query: { search: string; }; }' is not assignable to parameter of type 'string'." const router =…
thewb
  • 849
  • 1
  • 4
  • 12
33
votes
14 answers

NEXT JS - How to remove Query Params

How can I remove or update query params without refreshing the page in Next JS (React)? The user is on the URL /about?login=success&something=yes Click a button and removes ?login=success&something=yes from the URL without refreshing the page. The…
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
32
votes
3 answers

Next.js - router.push without scrolling to the top

I am using router from next by importing useRouter from next/router. I am trying to find a solution which will not scroll to the top of the page when I change the query of the URL. Is there any solution? I know that Link component from Next has that…
anticol
  • 487
  • 1
  • 4
  • 12
20
votes
4 answers

Next.js Router.push() reloads page automatically

Is there a way to execute a Router.push() without reloading the page using Next.js? I am using a [...all].js main file for a page that based on the url renders different components, but i want to be able to move between them without triggering a…
Francesco S
  • 2,125
  • 4
  • 15
  • 16
19
votes
3 answers

Mocking NextJS router events with Jest

I am trying to mock NextJS router events with Jest. Found a relevant resource right here at NextJS router & Jest. The implementation there is very similar to mine. However, the solution mentioned there is not working for me. My test is below: import…
Igor Shmukler
  • 1,742
  • 3
  • 15
  • 48
19
votes
1 answer

import Router from 'next/router' is it ok?

Next.js documentation mentions two ways to access the router object: useRouter for functional components and withRouter for class-based components. However, it does not mention something I came across a few times which is the Router object accessed…
fredperk
  • 737
  • 1
  • 9
  • 22
18
votes
8 answers

React + NextJS - Protected routes

Objective : I want to redirect a logged in user to the home page if he/she tries to manually go to the /auth/signin. Signin page/component : const Signin = ({ currentUser }) => { const [email, setEmail] = useState(''); const [password,…
Karan Kumar
  • 2,678
  • 5
  • 29
  • 65
16
votes
5 answers

Next.JS Abort fetching component for route: "/login"

I was developing a useUser Hook for per-page authentication. I have implemented the useUser hook normally and Redirecting works fine accordingly. But I am getting the above error. Abort fetching component for route: "/login" How can I fix…
김정수
  • 611
  • 4
  • 9
  • 22
15
votes
4 answers

use NextRouter outside of React component

I have a custom hook that will check whether you are logged in, and redirect you to the login page if you are not. Here is a pseudo implementation of my hook that assumes that you are not logged in: import { useRouter } from 'next/router'; export…
Titulum
  • 9,928
  • 11
  • 41
  • 79
14
votes
2 answers

Next.js router.push encodes query parameters

I'm trying to make a redirect using router.push to pass a query string, but when I try to pass a value in my param with special characters as a comma is encoding my URL. Is it possible to pass ',' into an URL using router.push? I have tried a lot of…
Andrés Felipe Jaimes Sánchez
  • 141
  • 1
  • 3
14
votes
4 answers

How to use router.replace inside the client side of your app?

I'm trying to use Next.js router to redirect unauthorized users from accessing certain pages that are wrapped inside the AdminLayout component, but I got this error. Error: No router instance found. You should only use "next/router" inside the…
user10261767
13
votes
3 answers

How to hide query params from the URL while using router.push?

I'm passing some data from one page to another via query params but I want to hide the query from the URL. Here is my code. import { useRouter } from "next/router"; const handleFormSubmit = async (values) => { const res = await…
Ishrat
  • 251
  • 1
  • 6
  • 16
12
votes
5 answers

NextJs router seems very slow compare to React Router

I have a website built in React Js and the same one on Next Js as well. The problem which I am facing right now is, the router seems very slow in the nextJs compare to react-router-dom, It's taking almost 2-3 seconds to change the route. Here are…
Muhammad Owais
  • 980
  • 3
  • 17
  • 37
11
votes
5 answers

How to get history and match in this.props in nextjs?

I want to get values of history and match in this.props. I am using next/router to import withRouter. I wanted to use this.props.match.params to get values in the url and history.push to redirect. How can get this in Next.js. Right now I am not…
Logeswari
  • 387
  • 3
  • 5
  • 9
10
votes
2 answers

how to listen to page changes in nextjs

I want to reuse a menu I made in react with react-router-dom, but this time in nextjs. The goal is to change the state of the menu to 'false' and the menuName to 'menu' when I click on a link inside the menu. I use a useEffect function to listen…
Rom-888
  • 681
  • 2
  • 9
  • 30
1
2 3
…
19 20