Обновление с реакционного маршрутизатора 2 до 4 вызывает проблемы с вложенными маршрутами и реактивной загрузкой

Question

Я обновляюсь с реакции-маршрутизатора 2 с реакцией, загружаемой на реагирующий маршрутизатор 4. При этом я столкнулся с проблемой, это мой старый код:

import {Router, Route, IndexRoute, browserHistory} from 'react-router';
import Loadable from 'react-loadable';

.
.
.

const Main = Loadable({
    loader: () => import('./app.jsx'),
    loading: () => null
});

const Login = Loadable({
    loader: () => import('./login.jsx'),
    loading: () => null
});

const About = Loadable({
    loader: () => import('./about.jsx'),
    loading: () => null
});
ReactDOM.render((

    <Router history={browserHistory}>
        <Route path="/" component={Main}>
            <IndexRoute component={Login}/>
            <Route path="/about" component={Brand}/>
        </Route>
    </Router>

), document.getElementById('container'));

Это новый код:

import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Loadable from 'react-loadable';

const Main = Loadable({
    loader: () => import('./app.jsx'),
    loading: () => null
});

const Login = Loadable({
    loader: () => import('./login.jsx'),
    loading: () => null
});

const About = Loadable({
    loader: () => import('./about.jsx'),
    loading: () => null
});

function Main(){
    return (
        <Switch>
            <Route path="/" component={Login}/>
            <Route path="/about" component={About}/>
        </Switch>
    );
}

ReactDOM.render((
    <BrowserRouter>
        <div>
            <Route component={Main}/>
        </div>
    </BrowserRouter>

), document.getElementById('container'));

Таким образом, проблема заключается в том, что при миграции вложенный маршрутизатор вызывает конфликт между компонентом Main (загружаемым) и функцией Main.Есть ли другой способ создать вложенный маршрут в response-router 4?