Navigating to nested routes

In the last chapter, we saw how to create nested routes using the match prop that the rendered component receives. The match.url property contains the browser's URL path that matched the <Route> component's path. Similarly, the <Link> and <NavLink> components can be used to create navigation links to access these nested routes:

<nav>
    <Link
        to={`${match.url}/pictures`}>
        Pictures
    </Link>
    <NavLink
        to={`${match.url}/books`}
        activeStyle={{
            background: 'orange'
        }}>
     Books
    </NavLink>
</nav>

In the preceding code snippet, the <Link> and <NavLink> components make use of match.url to get a reference to the current rendered route and add the additional path values required to navigate to the nested route.