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

To begin with, let’s look at the structure of my Chromatic Notes project’s App.js file to get a sense for the structure of the app. The main pieces relevant to this explainer are navGridNotebooks and nineTableOfContentsRoutes.

The navGridNotebooks always displays: it is constant, essentially a glorified navbar that takes up half the screen. On the right, are the nineTableOfContentsRoutes. Each of these nine looks like this (the color and notes props of each are unique (as is the path prop of the parent Route component):

<Route

path={`/${notebookInfo.color}`}

render={routerProps => <TableOfContents

{…routerProps}

color={notebookInfo.color}

notes={notebookInfo.notes}

selectNote={selectNote}

/>

The Route component itself contains just two props: the path that acts like a conditional (if the browser path matches this path, and the render prop, which is triggered when the path is matched, which renders the actual TableOfContents component. The render prop takes a callback as its value, which allows us to also pass in routerProps as an argument to that callback, giving the route access to information about itself, such as its URL. This way, for nesting, we can continue to pass this information down to more deeply nested components (essentially just prop drilling routerProps) in order to allow those more deeply nested components to continue building on top of earlier URLs. This keeps the URL nesting/appending in lockstep with the nesting of the component UI.

As actual UI, it looks like this:

The left half of this splitscreen is the NavGridNotebooks. This is a 3x3 grid of imported NotebookCard components which basically just have a color and name property. These become the “NavBar” for the first level of routing: when the Green Notebook’s NotebookCard component is clicked, its corresponding TableOfContents component opens on the right half of the screen, and the URL in the address bar is appended with the text “green.”

This is the master-detail pattern at a single level; in part three, I’ll go one level deeper, where the TableOfContents component (or really, the group of NotePreviewCards it holds) becomes the master relative to the display of individual NotePage components (where you can see and edit an individual note).

Software Engineer and Chinese Language Nerd

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store