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.
Questions tagged [next-router]
293 questions
2
votes
1 answer
nextjs app rerenders on routing to any page
I am using nextjs version 12.1.6, react-dom version 18.0.5, next-auth 4.6.1, I have an application with 2 routes at the moment, an index page and a login page, when I route from the index page to the login page and vice versa, my whole app…
dsal3389
- 658
- 1
- 7
- 26
2
votes
0 answers
test useeffect when it depends on next-router.query
On one hand I have a simple React component. When clicking on the button, the query string change and the useeffect hook with a dependency on router.next is triggered:
import React, {useEffect, useState} from 'react';
import { useRouter } from…
Bérenger
- 66
- 5
2
votes
2 answers
Get query parameters that aren't dynamic route parameters in next.js
I have a component that needs to copy all of the query parameters from the URL. However I do not want to copy dynamic route parameters. So if it is used in a component like: /pages/model/{modelId}.tsx and the url is…
kaan_a
- 3,503
- 1
- 28
- 52
2
votes
1 answer
Prevent going to the previous page on browser back button
I have a Next.js / React.js project I'm working on and I'm trying to redirect to a certain page when browser's back button is clicked. My approach is as follows
useEffect(() => {
Router?.beforePopState(({ as }) => {
if (as !==…
CraZyDroiD
- 6,622
- 30
- 95
- 182
2
votes
0 answers
How can I redirect a user to a certain page in my Next.js _app.tsx in a useEffect. Currently in infinite redirect loop
I am using Next.js and Firebase.
I want to allow users to sign up with Google, but I need to check at the app level whether the users status is "incomplete" or "active".
Here is my useEffect. I listen to userData here and if the status is…
squish
- 846
- 12
- 24
2
votes
2 answers
next.js shallow routing not working expectantly while adding a query string
The problem:
when attempting shallow routing with changing (adding or removing NOT updating) the query string in Next.js the page is reloaded and the shallow ignored.
How can I prevent reloading while changing the query string?
Example:
from:…
Masoud Aghaei
- 775
- 7
- 20
2
votes
1 answer
next/router not returning query string params in component
I have a component inside a page in a dynamic route in Next.js that needs to read the URL query string parameters. The app has a collection of articles you can search, and you can get to a specific 'page' within the article by visiting the…
mattlock
- 121
- 8
2
votes
0 answers
window.scrollTo not working on next js after install react-datepicker
I tried scrolling to the top page when refreshing the page. It's working. fine.
useEffect(() => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
}, []);
Then, install…
Raghuraj Balasubramaniam
- 217
- 3
- 8
2
votes
1 answer
Router events cause an error while being used on the constructor Warning: Can't perform a React state update on an unmounted component
I'm facing this issue, I tried to convert it to a function but the states didn't work as I expected. How can I solve this? I want to create a loading effect when switching routes without causing such issues:
react-dom.development.js?ac89:67 Warning:…
Soufiane
- 160
- 10
2
votes
2 answers
How to decode a url in JavaScript or NextJS?
In our NextJS application we have a URL that is fed with various query strings.
With some query strings, however, we have the problem that they are displayed in encoded form. For example like…
Codehan25
- 2,704
- 10
- 47
- 94
2
votes
1 answer
Hooks inside of utility components
I'm trying to follow Ben Awad's lireddit tutorial.
He shows how to make a utility file to show any authentication error across the app.
I think things may have changed with the next/router since he made the video. I'm struggling to figure out a way…
Mel
- 2,481
- 26
- 113
- 273
2
votes
1 answer
Framer Motion Page Transition Next JS Router.push
I made the following using the nextjs and framer motion
I have a list of images that I'm mapping over and assigning them a layoutid and an optional variant to animate. The layoutid corresponds to the layoutid on the model1, model2, model3…
Adam
- 1,136
- 8
- 26
- 51
2
votes
1 answer
Next.js update state depending on router.asPath
I have a next.js multistep form with a Stepper. Stepper has following state on the initial load:
const [steps, setStepsData] = useState([
{ name: 'Vertrag', status: 'current' },
{ name: 'Dateneingabe', status: 'upcoming' },
{ name:…
Katharina Schreiber
- 1,187
- 2
- 11
- 38
2
votes
0 answers
Getting the Site URL in Next.JS
I am setting up a Next.JS site and would like to retrieve the site url. For example, if I have a local install, then the site url would be localhost:3000. If I deploy the site, then it would be www.my-domainame.com.
I thought I could do this via…
Moshe
- 6,011
- 16
- 60
- 112
2
votes
0 answers
What is the difference between NextJs Singleton Router instance vs useRouter()?
I am using NextJS in my application. In that, for routing, we make use of the following:
import React from "react";
import {useRouter} from "next/router";
const IndexPage: React.FC = (props) => {
const router = useRouter();
useEffect(() => {
…
vighnesh153
- 4,354
- 2
- 13
- 27