CODEWITHSUNDEEP
javascriptreactjsurlnext.jsquery-string
Amir Danesh
Amir Danesh

Reputation: 307

NextJs: attempted to hard navigate to the same URL error while passing query string

I'm working on NextJs version 13.0.2 and ReactJs version 18.2.0. I want to pass a query string in the URL but I get:

Error: Invariant: attempted to hard navigate to the same URL /@workamirdanesh?w=true http://localhost:3000/@workamirdanesh?w=true

Everything is ok when I go to the http://localhost:3000/@workamirdanesh URL. But when I add a query string like: ?w=true and it becomes: http://localhost:3000/@workamirdanesh?w=true, I get the above error.

How can I solve it and what is the problem here? obviously, the query string should not throw an error and should load the page with the URL before the query string.

UPDATE: I updated the NextJs version to 13.0.7 and the problem still exists.

Upvotes: 17

Views: 22897

Answers (7)

Amirhossein
Amirhossein

Reputation: 2037

How do you do the navigation ?

One solution is to use the router.pathname instead of router.asPath when you're navigating to the new route.

Another thing that you can try is to do shallow routing by passing the shallow flag. Read more here.

The next thing you can do is to define a page for your errors and by that you'll catch the navigation errors and won't see the error again. Because as the community said it's probably because of 404 error.

And finally the last thing that you can try is to update the Next JS version to the latest version.

Upvotes: 1

Luis Miguel Avendaño Lozano
Luis Miguel Avendaño Lozano

Reputation: 66

This happened to me when on a page I tried to redirect to the same page using a menu of buttons that I had, the only thing I did was verify that if the path I was on was different from the path where I wanted to redirect, I would allow the redirection to be done, in If it were the same, don't do anything.

Upvotes: 0

Asaf David
Asaf David

Reputation: 3297

This issue can happen when you have a mismatch of pages routes, for example in my case I had the following structure:

pages
|-course
  |-[productId].js
  |-[courseId]
    |-summary.js

The mismatch was that the route could resolve with different variables (courseId, productId)

Changing it as follows fixed it:

pages
|-course
  |-[courseId]
    |-index.js
    |-summary.js

Upvotes: 3

Osama Malik
Osama Malik

Reputation: 355

Problem Faced:

In my case, I am trying to navigate to a page that is yet not created or not existed at all, so for the first refresh it works fine but if I try to navigate to the same URL using next/link tag, it gives this error.

Solution:

A trick to resolve/workaround is by dealing this route as dynamic using as attribute of link tag and let href attribute to be empty.

<Link href="" as="/something">Go to something</Link>

Upvotes: 0

n-dcool
n-dcool

Reputation: 1

Got same issue : Error: Invariant: attempted to hard navigate to the same URL / http://localhost:3000/

but ,

  1. npx kill-port 3000
  2. again run server by npm run dev

it worked for me

Upvotes: -1

Bright Lee
Bright Lee

Reputation: 2326

It would be worth checking your router.push. We had the same issue and we put router.asPath to the pathname.

    router.push(
      {
        pathname: router.pathname, // not router.asPath
        query: { confirm: true },
      },

changing it to router.pathname solved.

Upvotes: 1

Live Software Developer
Live Software Developer

Reputation: 416

Got the same issue

Unhandled Runtime Error
Error: Invariant: attempted to hard navigate to the same URL /listings/ http://localhost:3000/listings/

Seems to be occurring when returning to a 404 page, so if the page returns 404 and you click on the same link, it will result to the above error.

Upvotes: 7

Related Questions