访问该路由时未获取React路由器块包

Question

我想在访问路径网址时加载捆绑包。我的服务器是django localhost:8000。我的webpack拆开了包。

我的路由器组件：

import React from 'react';
import {BrowserRouter as Router, Route, Link, withRouter} from 'react-router-dom';

import App from '../app';
//import CollegeList from '../apps/college/CollegeList';
import CollegeDetail from '../apps/college/CollegeDetail';
import CourseList from '../apps/course/CourseList';
import CourseDetail from '../apps/course/CourseDetail';
import UniversityList from '../apps/university/UniversityList';
import UniversityDetail from '../apps/university/UniversityDetail';
import AdmissionList from '../apps/admission/AdmissionList';
import AdmissionDetail from '../apps/admission/AdmissionDetail';
import CareerList from '../apps/career/CareerList';
import CareerDetail from '../apps/career/CareerDetail';
import EventList from '../apps/event/EventList';
import EventDetail from '../apps/event/EventDetail';
import NewsList from '../apps/news/NewsList';
import NewsDetail from '../apps/news/NewsDetail';
import ScholarshipList from '../apps/scholarship/ScholarshipList';
import ScholarshipDetail from '../apps/scholarship/ScholarshipDetail';
import VacancyList from '../apps/vacancy/VacancyList';
import VacancyDetail from '../apps/vacancy/VacancyDetail';
import RankList from '../apps/rank/RankList';
import RankDetail from '../apps/rank/RankDetail';
import FacultyCourseList from '../apps/faculty/FacultyCourseList';
import LoginForm from '../apps/users/components/LoginForm';
import SignUpForm from '../apps/users/components/SignUpForm';
import Header from '../components/Header';
import Footer from '../components/Footer';
import LoadingComponent from '../components/LoadingComponent.js';


function loadRoute(cb) {
    return module => {console.log(module);cb(null, module.default)};
}

class AppRoute extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <LoadingComponent/>
                    <Header />
                    <Route exact path='/' component={App}/>
                    <Route exact path='/colleges' getComponent={(location, cb) => {
                        System.import('../apps/college/CollegeList')
                            .then(loadRoute(cb))
                            .catch((error) => {console.log('error')});
                    }}/>
                    <Route path='/colleges/:slug' component={CollegeDetail}/>
                    <Route exact path='/courses' component={CourseList}/>
                    <Route path='/courses/:slug' component={CourseDetail}/>
                    <Route exact path='/universities' component={UniversityList}/>
                    <Route path='/universities/:slug' component={UniversityDetail}/>
                    <Route exact path='/admissions' component={AdmissionList}/>
                    <Route path='/admissions/:slug' component={AdmissionDetail}/>
                    <Route exact path='/careers' component={CareerList}/>
                    <Route path='/careers/:slug' component={CareerDetail}/>
                    <Route exact path='/events' component={EventList}/>
                    <Route path='/events/:slug' component={EventDetail}/>
                    <Route exact path='/news' component={NewsList}/>
                    <Route path='/news/:slug' component={NewsDetail}/>
                    <Route exact path='/scholarships' component={ScholarshipList}/>
                    <Route path='/scholarships/:slug' component={ScholarshipDetail}/>
                    <Route exact path='/vacancies' component={VacancyList}/>
                    <Route path='/vacancies/:slug' component={VacancyDetail}/>
                    <Route exact path='/ranks' component={RankList}/>
                    <Route path='/ranks/:slug' component={RankDetail}/>
                    <Route exact path='/faculties' component={FacultyCourseList}/>
                    <Route path='/login' component={LoginForm}/>
                    <Route path='/signup' component={SignUpForm}/>
                    <br/>
                    <Footer />
                </div>
            </Router>
        )
    }
}

export default AppRoute

根据文档，当访问该路由时，这应该延迟加载我的包。当我访问url包时没有获取并且没有任何加载。 enter image description here

感谢。

Answer 1

我对System.import不熟悉，因为它已被弃用，而不是import()。但是，您没有将组件传递给loadRoute回调。

.then(module => loadRoute(cb, module))

我认为它不会以你实施的方式发挥作用

Answer 2

getComponent不能在react-router-dom中工作。要加载组件异步，我们必须使用asyncComponent。 code-splitting-react-router-dom

中的详细说明