GeezerVison

  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" defer></script>
  <script src="{{ site.baseurl }}/js/vendor/prism.js" defer></script>
  <link rel="stylesheet" href="{{ site.baseurl }}/css/prism.css">
  <script>
  [].forEach.call(document.getElementsByTagName("pre"), function(el) {
    var prism = false;
    el.classList.forEach(function(i) {
      prism = /language-/.test(i) ? true : false;
    })
    if (!prism) el.classList.add("prettyprint");
  });
  </script>
{% endif %}

      routeNum: ownProps.routes.filter(r => r.path).length
    })

So we can include two types of `name` prop in our Route components in `routes.js`:

1. Functions, that pull it out of state.
2. Strings, that are directly formatted.

<pre class="language-jsx">
  <code class="language-jsx">
    <Route name={state => state.locations.name} path={'locations/:id'} component={Locations}/>
    <Route name={'locations'} path={'locations/:id'} component={Locations}/>
  </code>
</pre>

Then, finally, we can do a bit of further mapping and reducing in the Breadcrumb container component to concatenate the paths correctly and evaluate the params.

    // Evaluate and replace multiple params in path
    // eg. door/:id/foo/:doorId -> door/2/foo/5
    const replaceParams = params => route => {
      const matches = route.path.match(/:([^\/]+)/g) || [];