CODEWITHSUNDEEP
javascriptreactjsnext.js
avocado
avocado

Reputation: 2735

Next.js: how to go to parent page from current child page?

my apology if this is a super dumb question, I'm a beginner of Next.js and React.js.

I have some basic knowledge that in Next.js, we can create a hierarchy of pages, and the path of a xx_page.js file would be the url route for that js file, as described in the documentation.

For example, my pages are structured as follows,

pages  // a folder
| -- home  // a folder
|     | -- index.js  // a file, the code for route "/home"
      | -- sports  // a folder
      |     | -- index.js  // a file, the code for route "/home/sports"
      |     | -- football.js  // a file, the code for "/home/sports/football"

Suppose the current page is at route "xxx.com/home/sports/football", and on the page there is a "Back" button, after clicking it, we should go back to "xxx.com/home/sports".

I failed to figure out a proper way to do that, mostly what I found by Google are about going back to the previous page, and not what I want.

Please give me some help about how to do it in Next.js, thanks!

Upvotes: 2

Views: 3211

Answers (2)

Naveen Setty
Naveen Setty

Reputation: 625

if you are looking to remove the last part of the URL, you can do the below

let a = window.location.href.split("/")
a.pop();
window.location.href = a.join("/");

Upvotes: 1

windmaomao
windmaomao

Reputation: 7671

There's no correct definition of "Back", so you have to define it. For your button, if you do the following

      <Link href="/home/sports">
        <a className="back">←</a>
      </Link>

It should behave exactly what you wanted.

Upvotes: 1

Related Questions