CODEWITHSUNDEEP
javascriptnext.jsnext-router
SkyPower
SkyPower

Reputation: 123

Next.js routing: pushing a new route from a slug page doesn't route properly

Let's say I have 2 routes: /video and /products/[id], so my pages folder contains video.js and products/[id].js. When I use router.push or Link to navigate to /video from /products/[id], the URL gets updated to /products/video. Obviously this is not the correct behavior.

What am I missing?

Upvotes: 1

Views: 2102

Answers (2)

juliomalves
juliomalves

Reputation: 50318

You need to provide the path to the video page as /video rather than just video. Otherwise it'll route in relation to the current path you're on - which from your products page is /products.

router.push('/video')

<Link href="/video">...</Link>

Upvotes: 1

Nhon Ha
Nhon Ha

Reputation: 488

I think you didnt name your files properly.

To get /video, you just have video.js as your page.

To get /products/[id] page, you need to have /products/[id].js file

You DONT name it as products[id].js. It's just [id].js.

So put your [id].js file inside your /products folder.

And put your video.js file inside your pages folder. eg /pages/video.js goes to /video route

And /pages/products/[id].js will go to /products/id.

Summary: Your pages folder should have video.js file, and create folder products, and put [id].js file in your products folder.

Upvotes: 1

Related Questions