Chapter 9 Router

React Programming
1

Chapter 9 discussion

2

Hey there!
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? :slight_smile:

Thanks…

3

Feeding into 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 Outlet within Details.

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?

4

Hi Loren,

I got it… (Or I rationalized it to myself anyway… :slight_smile: )

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… )

5

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.

6

I would love a little bit more of an explanation of template literals/backticks in the Thumbnail.js example:

src/components/Thumbnail.js

-function Thumbnail({ image, title }) {
+function Thumbnail({ itemId, image, title }) {
   return (
-    <a
-      href="#todo"
+    <Link
       className="thumbnail-component"
+      to={`/details/${itemId}`}

Because the path for each Thumbnail is based on the specific item, you use a template literal, specified by backticks, to compute the correct path from the itemId prop.

I don’t understand what the reason is for using a template literal, and tried:

  1. Using single quotes with {}, e.g.
to={'/details/${itemId}'}

with errors:

[eslint] 
src/components/Thumbnail.js
  Line 5:22:  'itemId' is defined but never used     no-unused-vars
  Line 9:10:  Curly braces are unnecessary here      react/jsx-curly-brace-presence
  Line 9:11:  Unexpected template string expression  no-template-curly-in-string
  1. Using just single quotes:
`to:"details/$itemId"

with errors:

[eslint] 
src/components/Thumbnail.js
  Line 5:22:  'itemId' is defined but never used     no-unused-vars
  Line 9:10:  Unexpected usage of singlequote        jsx-quotes
  Line 9:10:  Unexpected template string expression  no-template-curly-in-string

I think I understand why 2 doesn’t work (because we need to use {} to get the actual value of itemID), but why doesn’t 1 - in other words, why do we need the backticks?

7

Template literals are a javascript feature, which allow variables to be interpolated into text.
So the ${variableName} syntax only works within a template literal.

Alternatively, you could do to={'/details/' + itemId} and use string concatenation