title: React Router 4 match property
body: <p>I have a <code>AdminNav</code> component that has a set of <code>NavLink</code> elements so I can style them if they are active.</p>
  
  <p>The sections can also be manually opened/closed to appear less cluttered.</p>
  
  <p>What I would like to do is have a bunch of sections in the nav, and have the section be open if it has a <code>NavLink</code> that is active.</p>
  
  <p><strong>AdminNav.js</strong>
  Navigation component.  Basically a list of <code>NavLink</code>s.</p>
  
  <pre><code>import React, { Component } from 'react'
  import { NavLink, withRouter } from 'react-router-dom'
  import _find from 'lodash/find'
  
  import '../../css/sub-nav.css'
  
  class AdminNav extends Component {
  
      constructor(props){
          super(props)
  
          // Shows 'admin/' at all times
          console.log(props.match)
  
          this.state = {
              sectionRoutes: [
                  {
                      title: 'Cart',
                      routes: [
                          {
                              title: 'Dashboard',
                              path: '/admin',
                              exact: true
                          },
                          {
                              title: 'View Orders',
                              path: '/admin/view-orders',
                              exact: false
                          },
                          {
                              title: 'Cart Settings',
                              path: '/admin/settings',
                              exact: true
                          },
                          {
                              title: 'Merchant Settings',
                              path: '/admin/merchant',
                              exact: true
                          }
                      ]
                  },
                  {
                      title: 'Products',
                      routes: [
                          {
                              title: 'Add Product',
                              path: '/admin/product-add',
                              exact: true
                          },
                          {
                              title: 'Edit Product',
                              path: '/admin/product-edit',
                              exact: true
                          },
                          {
                              title: 'Add Category',
                              path: '/admin/category-add',
                              exact: true
                          },
                          {
                              title: 'Edit Category',
                              path: '/admin/category-edit',
                              exact: true
                          },
                          {
                              title: 'Set Category Order',
                              path: '/admin/category-order',
                              exact: true
                          }
                      ]
                  },
                  {
                      title: 'User',
                      routes: [
                          {
                              title: 'Logout',
                              path: '/admin/logout',
                              exact: true
                          }
                      ]
                  }
              ],
              openSections: []
          }
      }
  
      handleSectionClick = (sectionTitle) =&gt; {
          let titleIndex = this.state.openSections.indexOf(sectionTitle)
  
          if(titleIndex &gt; -1){
              this.setState({ openSections: this.state.openSections.filter((title, i) =&gt; i !== titleIndex)})
          }else{
              this.setState({ openSections: [ ...this.state.openSections, sectionTitle ] })
          }
      }
  
      isSectionOpen(section){
  
          const currentPath = this.props.location.pathname
  
          // Section is open if routh path matches the current path OR section has been manually opened
          // THIS DOES NOT WORK IF section is a route that has optional params (Ex. `admin/view-orders/:id?`)
          const result =  _find(section.routes, route =&gt; currentPath === route.path) ||
                          _find(this.state.openSections, title =&gt; title === section.title)
  
          return result
      }
  
      render() {
          return (
              &lt;div className="sub_nav"&gt;
                  &lt;div className="title"&gt;Admin Menu&lt;/div&gt;
  
                  {this.state.sectionRoutes.map(section =&gt;
                      &lt;div key={section.title} className="nav_section"&gt;
                          &lt;div className={'section_title' + (this.isSectionOpen(section) ? ' open' : '')} onClick={(e) =&gt; this.handleSectionClick(section.title)}&gt;{section.title}&lt;/div&gt;
                          &lt;div&gt;
                              {section.routes.map(route =&gt;
                                  &lt;NavLink key={route.title} activeClassName="active" to={route.path} exact={!!route.exact}&gt;{route.title}&lt;/NavLink&gt;
                              )}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  )}
              &lt;/div&gt;
          )
      }
  }
  
  export default withRouter(AdminNav)
  </code></pre>
  
  <p>So if I go to <code>admin/</code>, the <code>Cart</code> section opens as expected.
  If I go to <code>admin/view-orders</code>, the <code>Cart</code> section as expected.
  However, if I go to <code>admin/view-orders/123</code> no path for the <code>NavLink</code>array matches that so the section doesn't get the <code>open</code> class added.</p>
  
  <p><strong>adminRoutes.js</strong>
  This is just a routing file that stores all of my admin routes.  It's not fully shown here.</p>
  
  <pre><code>import React from 'react'
  
  import AdminDashboard from './AdminDashboard'
  import AdminLogout from './AdminLogout'
  import AdminOrders from './AdminOrders'
  
  export default [
      {
          path: "/admin",
          exact: true,
          render: (props) =&gt; (&lt;AdminDashboard {...props} /&gt;)
      },
      {
          path: "/admin/logout",
          component: AdminLogout
      },
      {
          path: "/admin/view-orders/:id?",
          component: AdminOrders
      },
      {
          component: () =&gt; &lt;h1 className="no-margin"&gt;Page not found&lt;/h1&gt;
      }
  ]
  </code></pre>
  
  <p><strong>Admin.js</strong>
  The parent admin route.  This has the <code>AdminNav</code>, and will route to any of the admin child routes as described in <code>adminRoutes.js</code></p>
  
  <pre><code>import React, { Component } from 'react'
  import { Switch, Route } from 'react-router-dom'
  import AdminNav from './AdminNav'
  
  import routes from './adminRoutes'
  
  class Admin extends Component {
      render() {
          return (
              &lt;div className="full_body_container"&gt;
                  &lt;div className="sub_nav_wrapper"&gt;
                      &lt;div className="hbs-container-admin-nav"&gt;
                          &lt;AdminNav /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="content_wrapper"&gt;
                      {
                          &lt;Switch&gt;
                              {routes.map((route, i) =&gt; &lt;Route key={i} {...route} /&gt;)}
                          &lt;/Switch&gt;
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Admin
  </code></pre>
  
  <p>Is there a better way to go about this?  Am I able to access the actual fully matched route from this component?  Or is this </p>