Open t-zander opened 1 year ago
+1 and great mock-ups @t-zander
@t-zander I got it! It was simpler than expected, using layout.tsx
The layout uses a 2-column grid, where:
/products/[id]
page (the [id] page fetches its own product details using param.id)here is code example https://github.com/mcgrealife/next13-app-example/tree/main
I found fetching productIds in the layout better (and passing as props to SideBar), so the SideBar component can use client
for dynamic styles based on selected product/[id] via usePathname()
(I have not updated the example repo yet)
I see. So it means Layout
is always shown for child page too. So even when we go to product/:id
, we have this kind of tree
<Layout>
<SideBar />
<products[id] />
</Layout>
I guess this will work perfectly fine in this case, indeed π The only thing is that we treat products list as part of Layout
, but in usual react app we treat it as a top lvl page. I guess it's still a bit difficult for me to shift my mind to next.js approach. But your example seems to solve the problem perfectly well. Thanks a lot π
What is the improvement or update you wish to see?
Currently I see this in the docs:
However I guess it is a valid use case and pattern in plain react, when you have nested route which renders on the same page. You just use
<Outlet />
(for react router) as many times as needed, to render child route on the same page in response to url change.Simplified example:
products
- shows list of productsproducts/:productId
- shows product information and stays on the same page, meaning both products list and product info are shown.Is this possible? It would be nice to have it explicitly stated and if it's possible, have an example.
I know that there is a route intercept + parallel routes, but it's not something which is needed fro this use case.
Is there any context that might help us understand?
Let's say there is a page called products. When user goes to this page, it shows a list of products. The structure would be smth like
app/ -- products/ ---- page.tsx In UI it will look like this![image](https://github.com/vercel/next.js/assets/34350867/d105130b-91c3-46a7-95bc-09f82b43210c)
Then, when user clicks on a specific product it should show that product details on the same page on the right side and url should change to products/:id In UI it will look like this:![image](https://github.com/vercel/next.js/assets/34350867/4850560b-8707-4fa9-8a63-a19e9a65d10a)
In react world you would just have one top lvl to render /products and then you'd have a nested route and nested to render product information. Like this:
Is it possible to do it in next.js world? If I created another page like
app/ -- products/ ---- page.tsx ---- [id] ------ page.tsx It will be a completely separate page.
If next.js provides smth similar, would be good to have it in the docs. If not, still would be nice too see alternatives. Currently I could achieve smth close by using query param, parallel routes and then checking route query param and showing one of two parallel routes
Does the docs page already exist? Please link to it.
https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes
DX-1697