title: Dynamically build routes using react-router
body: <p>I'm building an application that will call out to an API prior to bootstrapping React. This API will tell me which features I need to load based on the user's subscription.</p>
  
  <p>The API will return an array of objects with the pattern outlined below</p>
  
  <pre><code>links: [
      {
          label: 'Payment Reconciliation',
          component: './components/_paymentReconciliation/paymentReconciliationPage',
          url: '/paymentreconciliation'
      },
      {
          label: 'Device Integration',
          component: './components/_deviceIntegration/deviceIntegrationPage',
          url: '/deviceintegration'
      }
  ]
  </code></pre>
  
  <p>It's easy enough to map the links to produce dynamic <code>Routes</code></p>
  
  <pre><code>export default function Routes() {
      let featureRoutes = config.FEATURES.links.map((menuItem, i) =&gt; {
          return (
              &lt;Route path={menuItem.url} component={require(menuItem.component).default} key={i} /&gt;
          )
      });
      return (&lt;div&gt;
          &lt;Route exact path="/" component={LandingPage} /&gt;
          {featureRoutes}
      &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>This obviously isn't working. I'm struggling figuring out how to not need an import statement for every possible Component that might be loaded. Also should the API be returning the path to the component or just the component name? I've seen examples using something like <code>handler={require(PathToComponent)}</code> That hasn't proven to work either.</p>
  
  <p>Any help here would be appreciated</p>