Question

我正在从具有可加载的react的react-router 2升级到react-router4。这样做时，我遇到了一个问题，这是我的旧代码：

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函数之间发生冲突。还有另一种方法可以在react-router 4中创建嵌套路由吗？

从react-router 2升级到4会导致嵌套路由和react-loadable问题

0 个答案: