title: React Router - routes from separate file
body: <p>I'm building small SPA web app with react, react router and semantic. Problem appeared when I decited to move my routes from main .jsx to separate file. I wanted to create something similar to <a href="https://alligator.io/react/react-router-map-to-routes/" rel="nofollow noreferrer">this</a> and theoretically everything works well but components in routes are 'undefined'.</p>
  
  <p>My project structure looks like this:</p>
  
  <pre><code>root
   |_ src
       |_ config
       |   |_ routes.js
       |   | ...
       |_ app
           |_ index.jsx
           | ...
  </code></pre>
  
  <p>routes.js:</p>
  
  <pre><code>import { Main, Add } from 'views';
  
  export const routes = [
    {
      component: Main,
      path: '/',
    }, {
      component: Add,
      path: '/add',
    },
  ];
  </code></pre>
  
  <p>Index.jsx:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import { routes } from 'config';
  import {
    BrowserRouter,
    Route,
    Switch,
  } from 'react-router-dom';
  
  export class Index extends React.Component {
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;Switch&gt;
            {routes.map(props =&gt; &lt;Route {...props} /&gt;)}
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Index /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>When i put console.log(routes) into the render I got something like that:</p>
  
  <pre><code>[
    { component: undefined, path: "/" },
    { component: undefined, path: "/add" }
  ]
  </code></pre>
  
  <p>and I have no idea where the problem may be.</p>