title: Nested routes (/:foo/:bar) with parameters do not render, why?
body: <p>So, I'm not sure if I should've structured my app different or if I'm doing something fundamentally wrong. I'm a bit confused, but let's explain first things first.</p>
  
  <p>In the first navigation level, there are 4 pages - and for every page, there is a detail page.</p>
  
  <ul>
  <li>Home</li>
  <li>Article-Category 1
  
  <ul>
  <li>Detail page</li>
  </ul></li>
  <li>Article-Category 2
  
  <ul>
  <li>Detail page</li>
  </ul></li>
  <li>Article-Category 3
  
  <ul>
  <li>Detail page</li>
  </ul></li>
  </ul>
  
  <p>The <em>article category</em> pages are exactly the same. They all hold a list (<code>&lt;ul&gt;&lt;li&gt;&lt;Link&gt;&lt;/Link&gt;&lt;/li&gt;&lt;li&gt;...&lt;/ul&gt;</code>) of 10-20 articles, so I actually just created one component, the <em>article category</em> component.</p>
  
  <p>To make this work, the main navigation of the app holds <code>&lt;Link&gt;</code>'s which have a param called <code>page</code> passed to the <em>article category</em> component. Depending on this parameter, the view looks for the articles in an array and uses another component to render them as a list.</p>
  
  <p>The article array itself holds the name of the the article and the parameter <em>article name</em>, f.e. <em>this-is-an-article</em>. I'm passing the article name parameter to the detail component which looks, depending on this and the page parameter, for the correct article.</p>
  
  <p>Okay, so I hope this is clear. Now, this is my <strong>react-router configuration</strong>:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>export default (
      &lt;Route path="/" handler={App}&gt;
          {/* Home */}
          &lt;DefaultRoute name="home" handler={Home}/&gt;
  
          {/* Page */}
          &lt;Route name="category" path=":category" handler={Category}&gt;
              &lt;Route name="category.article" path=":article" handler={Article} /&gt;
          &lt;/Route&gt;
  
          {/* Not found */}
          &lt;NotFoundRoute handler={NotFound} /&gt;
      &lt;/Route&gt;
  );
  </code></pre>
  
  <p>.. but this doesn't work. If I click on an article link which has the correct parameters, nothing happens - well, the URL changes, but nothing else.. and the navigation menu item stays active, which is good. I at least know the parameters are correct because when I change my route confgiruation below <code>/* Page */</code> to this:</p>
  
  <pre class="lang-js prettyprint-override"><code>    &lt;Route name="category" path=":category" handler={Category} /&gt;
      &lt;Route name="category.article" path=":category/:article" handler={Article} /&gt;
  </code></pre>
  
  <p>it works, but in my main navigation, the naivgation item isn't active anymore when I'm on an article (detail) page, I guess because it's not a child route anymore, so the configuration above this should be the correct one, but it doesn't work..</p>
  
  <p>Below, there are the relevant components and their code + the content array/object. Mind you, the code shown is without any import's (I'm using ES6 with Babel through Webpack), but of course there are some.</p>
  
  <p><strong>Article component</strong> (renders the article itself)</p>
  
  <pre class="lang-js prettyprint-override"><code>let Article = React.createClass({
      getInitialState() {
          return {
              article: this.props.params.article,
              category: this.props.params.category
          }
      },
      componentWillReceiveProps(nextProps) {
          this.setState({
              article: nextProps.params.article,
              category: nextProps.params.category
          })
      },
      render() {
          let content = this._getContent();
  
          return (
              &lt;div className="page_content page_content-article"&gt;
                  &lt;ArticleHeader /&gt;
                  {content}
              &lt;/div&gt;
          )
      },
      _getContent() {
          let item;
  
          for(item of ContentStore[this.state.category]) {
              if(item.name === this.state.article) {
                  return item.content;
              }
          }
      }
  });
  </code></pre>
  
  <p><strong>Category component</strong> (renders the article list with the ArticleList component which just renders  with the category and article params and is the same for each category)</p>
  
  <pre class="lang-js prettyprint-override"><code>let Index = React.createClass({
      getInitialState() {
          return {
              category: this.props.params.category
          };
      },
      componentWillReceiveProps(nextProps) {
          this.setState({
              category: nextProps.params.category
          });
      },
      render() {
  
          return (
              &lt;div className={'page_content page_content-' + this.state.category}&gt;
                  &lt;ArticleList articles={this._getArticles()} category={this.state.category} /&gt;
              &lt;/div&gt;
          )
      },
      _getArticles() {
          return ContentStore[this.state.category];
      }
  });
  </code></pre>
  
  <p><strong>App component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>let App = React.createClass({
      render() {
          return (
              &lt;div className="page"&gt;
                  &lt;RouteHandler /&gt;
                  &lt;Navigation /&gt;
              &lt;/div&gt;
          )
      }
  });
  </code></pre>
  
  <p><strong>PageStore</strong> (Example of the data - this renders the main navigation)</p>
  
  <pre class="lang-js prettyprint-override"><code>PageStore: [
      {
          id: 1,
          title: 'Home',
          iconClass: 'home',
          linkTo: 'home',
          params: null
      },
      {
          id: 2,
          title: 'Category 1',
          iconClass: 'foo',
          linkTo: 'category',
          params: {
              category: 'foo',
          }
      },
      ...
  ]
  </code></pre>
  
  <p><strong>ContentStore</strong> (example of the data - this renders the article lists and the detail view as it has it's content)</p>
  
  <pre class="lang-js prettyprint-override"><code>ContentStore: {
      // "foo" is the category name
      foo: [
          {
              id: 1,
              name: 'article-1',
              linkText: 'Article 1',
              content: (
                  &lt;div&gt;
                      lorem ipsum...
                  &lt;/div&gt;
              )
          },
  
      ]
  } 
  </code></pre>
  
  <p>I have two questions:</p>
  
  <ul>
  <li>What am I missing and how do I make this work?</li>
  <li>SHOULD I actually make this work even if I can or is there a better way? I did it this way because the category pages and the detail page do not have any differences except the content, which comes (yet) from a simple array.</li>
  </ul>
  
  <p>I also ask if I actually should do this because well.. I never see nested routes where both, the parent and the child, have props. Maybe this is actually a bad thing to do.. I'm not sure. If you need any more information, I'm happy to provide it and thanks you in advance.</p>