在 react-router-dom/webpack2 中使用 import()答案

【问题标题】：using import() in react-router-dom/webpack2在 react-router-dom/webpack2 中使用 import()
【发布时间】：2017-12-18 05:01:15
【问题描述】：

我google了一下，还是不知道怎么用import()和react-router-dom (version 4.x)来实现code-splitting/async-route的效果。

我正在使用webpack2

react-router-dom 的文档使用bundle-loader。但我认为import() 原生支持webpack2。有没有办法直接使用import()？

谢谢

【问题讨论】：

标签： javascript reactjs webpack react-router webpack-2

【解决方案1】：

很简单

<Route path="/page3" render={() => (
  <AC loader={import('./Page3')} />
)} />


class AC extends Component {
  state = {
    _: null
  }
  async componentDidMount() {
    const { default: _ } = await this.props.loader;
    this.setState({
      _: <_ />
    });
  }
  render() {
    return (
      <div>{this.state._}</div>
    );
  }
}

【讨论】：

【解决方案2】：

不管怎样，我自己想办法。

目前有点用。但我已经在现实世界中对其进行了测试。非常感谢指出 sn-p 中的错误。

谢谢。

先有一个这样的组件

//@flow

import React from "react";

import { Loading } from "../loading";

let map = {};

export function AsyncLoad(props: {
    moduleKey: string,
    loadedFrom: Promise<any>,
    onLoaded: () => void
}) {
    let Comp = map[props.moduleKey];
    if (Comp) {
        let passedProp = Object.assign({}, props);
        delete passedProp.moduleKey;
        delete passedProp.loadedFrom;
        return <Comp {...props} />;
    } else {
        processModule();
        return <Loading />;
    }

    async function processModule() {
        const mod = await props.loadedFrom;
        map[props.moduleKey] = mod.default;
        props.onLoaded();
    }
}

然后在我的 App.js 中，这样做：

//@flow

import React, { PureComponent } from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import { AsyncLoad } from "./asyncLoad";

import "./app.scss";

export class App extends PureComponent {
    render() {
        return (
            <Router>
                <div>
                    <Link to="/quiz">Show Quiz</Link>
                    <div className="content">
                        <Route
                            path="/quiz"
                            component={() =>
                                <AsyncLoad
                                    moduleKey="quiz"
                                    loadedFrom={import("./quiz")}
                                    onLoaded={() => {
                                        this.forceUpdate();
                                    }}
                                />}
                        />
                    </div>
                </div>
            </Router>
        );
    }
}

【讨论】：

【解决方案3】：

https://github.com/brotzky/code-splitting-react-webpack

https://brotzky.co/blog/code-splitting-react-router-webpack-2/

检查一下，我按照步骤完成我的项目所需的动态代码。

【讨论】：

对不起，我的错，没有说清楚。我正在使用 react-router@4.x。您提供的链接是第 3 版。但无论如何，谢谢。