Setting up Nested Routes in a Note-taking App (pt 3)

On the second, nested level of routing, when we click on the view/edit button for an individual note, we want to be able to see that note and edit it.

Clicking the edit button for the NotePreviewCard with the title Note 1: PostegreSQL swaps out the TableOfContents component and replaces it with the NotePage component; it also appends the id of this note to the URL, so that the URL now reads localhost:3000/green/1.

The TableOfContents component follows essentially the exact same pattern as the app component; the obvious difference is that the nested component’s (detail) rendering will take the part of the screen that just before held the list-like component (master) that allowed the detail to be selected.

We pass a match prop to the NotePreviewCard component so that we can use that to create a Link component with its “to” prop pointing to a nested URL for each NotebookPreviewCard, like so:

<Button variant=”secondary” onClick={handleEditNoteClick}>

<Link to={`${match.url}/${props.id}`} > 📖 </Link>

</Button>

The match.url part just holds the URL of the previous UI state we were in (looking at a TableOfContents component of a particular color, say “green”) which we build on top of with props.id (“1”), the ID of the particular note we are viewing.

At present, the UI’s a bit sloppy, but the functionality is mostly working. I spent a while refactoring and simplifying some kludged together code and that appears to have fixed a key functionality bug, namely, there was a while where only one note was displaying on the right side. For some odd reason, it appeared to be receiving its props, but rendering the note was only working for the first note in the array of notes, otherwise the NotePage component was breaking.

I have a few theories as to why, and the technologies that I might want to use to prevent such wastes of time in the future.

One theory is that I had typing issues, since the pulling the nested url piece out (the appended ID number representing separate notes) as a parameter seemed to yield a string. I converted this into a string, but in any case, if I’d used TypeScript this wouldn’t have even been a question.

Another theory was that some piece of data was getting dropped along the way, or not getting referenced correctly. There has been a fair amount of prop drilling in this project, so that seems like a decent reason to consider using Redux alongside this pattern.

In any case, at the end of the day I cleaned up my code and it started working. I think the main culprit for struggling to make routing work was just writing sloppy code that I didn’t fully understand how to interconnect, but to break that down a bit, some causative factors of that were:

1. routing is inherently a bit difficult to understand
2. insufficient use of the documentation by this author (insert some meme á la “why spend 30 minutes reading documentation when you can spend 3 days debugging your app?”) (impatience)
3. relying on written documentation when a well done video tutorial helped me understand nested routing much faster, especially by using hooks like useParams and useRouteMatch, and seeing all components in a single file, rather than spread out in multiple files, making it harder to see the relationships and hierarchies between the different app components and react-router-dom components (i.e., Link and Route) and the relevant properties to pass them.

Anyway, as far as routing is concerned, I think this part is mostly complete. Please note that there are some components that have been passed props that they don’t need, or at least that I haven’t had to use just yet. NotePage is passed match and location props, but that’s just extra stuff I need to delete/clean up when I have a moment.