React Router v4 Tutorial - #5 Nested Routes

We've already come across nested routing when building out the writer's details page. In this video, I decided to go further and explore deeply nested routes. Our app currently features authors, but it would be useful to also know about the works that they had produced. For that, we'll set up a "texts" resource in our data store referring to the books or publications.

Every text or book was written by an author, hence the relationship between the two is such that a writer has many books. In other words, "texts" is a children resource of "writers". That's great, but Alex, how do we create an association between the two? Well, we don't, you silly goose! Turns out, json-server already features a mechanism to tie these two together. All we need is a "writerId" property on each text object, and voilà, the two are linked up!

To verify, you can issue a GET on /writers?_embed=texts. Notice the _embed query param; it instructs json-server to include a given child resource in the payload. In this example, each writer will also have a "texts" attribute holding an array of books each with its corresponding writerId. The upshot is that now, not only do we have a listing of writers, but also a catalog of the books that they'd written! Moreover, we can also POST to /writers/{writerId}/texts to create a new book resource, and json-server will infer "writerId" from the URI path and pre-populate it, how cool is that?

When it comes down to React Router, adding an extra nested route is trivial. A Route component can go straight into the Writer file. We'll loop through the books and list a link to each, then render a Text component to show the book details (title, description, you name them). From then on, it's easy-peasy. In the next episode, we'll connect the app with Material-UI.

[kolodziejczykmonica]

Hi Alex, nice to e-meet you. Great intro to Routers, I'm following and everything works fine even now!

[SimPwear]

Your series is making me feel confident. Thanks so much!!

[khamdamov]

thanks a bunch for this series. I really enjoyed. please, make a series of react lifecycle hooks components.

[jacobhansen]

Really helpful series to understand React. Thanks!

[fazuelle]

I would like to have nested routes with nested layouts, for exemple, make an app component that works as a container for my app and holds a base layout like some navigation buttons, is that possible? I mean, nesting components makes them show up one to the top of the other, instead I want them to be displayed one inside the other

[dabeda]

That hallway behind you looks like a hallway to abys. :D

[AH-kyxb]

Under Route in the index.js.../writers why is the author passing props => ... as an argument. Isnt it passed as a default. Couldn;t the author have simply added the props argument to the index.js.../writer function? instead of adding match, etc?

[daysnight]

Hello Realm, great tutorial. I can ask one question. In my project i have a Mini variant drawer. In the right corner i have 3 icons. When i open the drawer - icons in the right make move. I do not want this behavior. I want them to stay in place like youtube site drawer. Sorry for my bad english

[ericellison]

please share that store.json file with us, to work with .... threre is no store filein that link ....

[arlogodfrey]

What mouse are you using? I can so clearly hear it °__°

[fadilnatakusumah]

pretty much you cover all the important things, but the explanation is a little bit too fast for me. But thank you anyway, great content