reactjs - 如何仅在需要时才加载React Router中的组件？

Question

考虑这个示例代码:

require(["js/components/feed-component", "js/components/single-post-component"], function (x, y) {
    ReactDOM.render(React.createElement(
        Router,
        { history: BrowserHistory },
        React.createElement(Route, { path: "/", component: x }),
        React.createElement(Route, { path: "post", component: y})
    ), document.getElementById("appContainer"));
});

即使用户从未访问过 /post 页面，这里的 js/components/single-post-component 组件也会从服务器加载。

如何避免这种情况？如何使组件仅在用户访问 URL 时才加载。

在 Angular 中，ng-view 当用户访问 URL 时会加载 View 。我希望 React 中也能发生类似的事情。

Answer 1

我已经成功完成了，但是你需要使用像 Webpack 这样的 bundler 来实现它。首先，您需要分割路由，以便它们动态加载。你可以看看example在 React Router 上了解如何动态设置路由。基本上，您可以推迟组件的加载，因为每个路由都有一个 getComponent 方法。

  ...imports

  let rootRoute = {
    path: '/',
    name: 'root',
    component: require('./containers/App2'),
    indexRoute: {
      getComponent: (location, cb) => {
       return require.ensure([], (require) => {
        cb(null, require('./containers/App'))
       })
     }
  }

  //routes is now an object
  <Router history={appHistory} routes={rootRoute} />

因此，您已经推迟了所需组件的加载，直到调用您的路由为止。这也是分解应用程序中模块的好方法。

现在在 Webpack 中(抱歉，这是我唯一有过使用经验的)，它只能返回您访问的应用程序部分。

这是我的 webpack.config 文件的顶部。

module.exports = {
  devtool: 'eval-source-map',
  entry: ['./htdocs/js/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'https://localhost:3000/dist/'
  },
  //other settings down here
}

react 路由器上的巨大应用程序示例也展示了它是如何工作的，我用它作为我的项目的基础来分割我非常大的捆绑文件。