title: Creating react-router Routes in a function
body: <p>Is it possible to create the <code>&lt;Route&gt;</code> elements through a function? I would like to display different routes/pages and the application is not aware how many they are. The pages are in the state stored in an array of page objects. Each page object have an id, title, path and body elements (so far). I think that my Router should look like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>render((
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={App}&gt;
        &lt;Route path="page1" component={CommonPage}/&gt;
        &lt;Route path="page2" component={CommonPage} /&gt;
        &lt;Route path="page3" component={CommonPage} /&gt;
        &lt;Route path="page4" component={CommonPage}/&gt;
        &lt;Route path="page5" component={CommonPage} /&gt;
        &lt;Route path="page6" component={CommonPage} /&gt;
        &lt;/Route&gt;
        &lt;Route path="*" component={NoMatch}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  ), document.body)</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I would like to define it with a function like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>render((
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={App}&gt;
        {
          mapPagesToRoutes(pages) 
         }
        &lt;Route path="*" component={NoMatch}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  ), document.body)
  
  mapPagesToRoutes(pages)  {
    return pages.map( page =&gt; () {
      if(page.type === 'CommonPage' {
         return &lt;Route path={page.path}  component={CommonPage}
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Q1: How is this done?
  Q2: How do I identify each with something other than the path. Can I use some sort of key=page.id in <code>&lt;Route&gt;</code>?</p>