title: React router with multiple hierarchical parameters
body: <p>I have a documentation component and I would like my urls to look like this: </p>
  
  <pre><code>url: myapp.com/docs
  url: myapp.com/docs/document-1
  url: myapp.com/docs/category-1/document-2
  url: myapp.com/docs/category-1/category-2/document-2
  </code></pre>
  
  <p>I'm struggling setting up the routes.</p>
  
  <p>I've tried a few things, including:</p>
  
  <pre><code> &lt;Route path="docs"&gt;
       &lt;IndexRoute component={Docs} /&gt;
       &lt;Route path=":path" component={Docs} /&gt;
   &lt;/Route&gt;
  </code></pre>
  
  <p>This works well for <code>myapp.com/docs/document-1</code> but it does not work well with <code>myapp.com/docs/category-1/document-2</code>, meaning that <code>this.props.params.path</code> will return <code>document-1</code> in the first case but gets confused in the second.</p>
  
  <p>I would like to get the path after <code>myapp.com/docs</code>. For example, for <code>myapp.com/docs/category-1/category-2/document-2</code> I would like to be able to pickup <code>/category-1/category-2/document-2</code>.</p>
  
  <p>Any thoughts on how to accomplish that? Please let me know if the question is not clear enough. </p>
  
  <p>note: I don't have control about the number of layers on the url. </p>