Chapter 9 discussion
Thanks for the book… It’s very well written…
Got a question on Chapter 9… I think that I understand everything except one key part. I am not sure how the DetailItem component is being “bound to the Outlet” element within the Details component.
Is it the fact that the “First element in the nested Route feeds designated element into the outlet?” And dynamic routes are coming in chapter 10?
Outlet is done by React Router. The first selected route (in this case
Details) is rendered where the
Routes block is located. Once
Details is rendered, it’s child route
DetailItem is rendered in the
This section of the React Router tutorial may be helpful: Tutorial v6.14.2 | React Router
Or this animation where you mouse over the different components at the top: https://remix.run/_docs/routing (note it is using 3 levels of nesting and therefore would have three
Outlets: one in Root where Sales is rendered, one in Sales where Invoices is rendered, and one in Invoices where the specific invoice is render). I don’t see matching code for that example so feel free to ignore it if it’s confusing.
Is that helpful?
I got it… (Or I rationalized it to myself anyway… )
I am now envisioning that when App renders Details via the first route, the ‘Outlet’ goes BACK to the parent (App) and which says ‘OK, what nested route matches next?’, which is then DetailItems and that element is injected into the location specified by the Details component…
Is this close? (Thanks for the examples… I will check them out… )
Good question, I’m not sure if
DetailItems would render or not if there was no
Outlet. You could add a console.log in it and find out.