Dynamic Parallel Routes
Answered
Tonkinese posted this in #help-forum
TonkineseOP
On the website I'm developing, there are various types of items:
- Blog posts
- Product reviews
- Portfolio projects
I'd like my homepage to display one item of each type, along with arrows to navigate to the next and previous items—all while remaining on the homepage. Normally, I would implement this feature using three separate sliders with a library like react-slick or something similar.
I'm curious if this functionality can be achieved using parallel routes, as shown below:
app
(posts)
[post]
page.js
default.js
(products)
[product]
page.js
default.js
(portfolio)
...
Is this achievable through parallel routes, or should I stick with traditional solutions like react-slick?
- Blog posts
- Product reviews
- Portfolio projects
I'd like my homepage to display one item of each type, along with arrows to navigate to the next and previous items—all while remaining on the homepage. Normally, I would implement this feature using three separate sliders with a library like react-slick or something similar.
I'm curious if this functionality can be achieved using parallel routes, as shown below:
app
(posts)
[post]
page.js
default.js
(products)
[product]
page.js
default.js
(portfolio)
...
Is this achievable through parallel routes, or should I stick with traditional solutions like react-slick?
Answered by fuma
Parallel route is just something allows you to render multiple pages on a page, the page contents are passed to your layout via props.
Assume you have
If you're trying to display the content of these pages on a page, then you may use parallel routes
Assume you have
/blogs (a list of blog posts), /products (a list of product reviews), /projects page (a list of projects) pages.If you're trying to display the content of these pages on a page, then you may use parallel routes
8 Replies
TonkineseOP
Try my luck again - did anyone try to implement dynamic parallel routes and can advice on the right architecture?
Parallel route is just something allows you to render multiple pages on a page, the page contents are passed to your layout via props.
Assume you have
If you're trying to display the content of these pages on a page, then you may use parallel routes
Assume you have
/blogs (a list of blog posts), /products (a list of product reviews), /projects page (a list of projects) pages.If you're trying to display the content of these pages on a page, then you may use parallel routes
Answer
Otherwise, it's not the use case of Parallel route
For example, when you only want to show the last blog post, Parallel route doesn't gonna work
You can just get the last post and render it on your own component, which is the preferred way
TonkineseOP
Thanks for your response @fuma but i am not sure I understand.
I'll try to explain better: the homepage should present the first post, product, and review, each with a navigation button "next", so the user can navigate to the next post/product/review, without leaving the page (only the specific item should re-render)
I'll try to explain better: the homepage should present the first post, product, and review, each with a navigation button "next", so the user can navigate to the next post/product/review, without leaving the page (only the specific item should re-render)
No, this is not a use case of parallel routes. You have to use traditional solutions to achieve this
TonkineseOP
Thanks @fuma