Reactjs 如何仅在需要时在react路由器中加载组件？

考虑以下示例代码：

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组件

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

在Angular中，
ng视图
在用户访问URL时加载视图。我也希望在React中发生类似的事情。
我已经成功地做到了，但您需要使用像Webpack这样的捆绑程序来实现它。首先，您需要将路由拆分，以便动态加载。您可以查看on react路由器，了解如何动态设置路由。基本上，您可以延迟加载组件，因为每个路由都有一个
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} />

react router上的大型应用程序示例也展示了它的工作原理，我使用它作为我的项目的基础，来分割我非常大的捆绑文件
 我已经成功地完成了，但您需要使用像Webpack这样的捆绑包来实现它。首先，您需要将路由拆分，以便动态加载。您可以查看on react路由器，了解如何动态设置路由。基本上，您可以延迟加载组件，因为每个路由都有一个
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} />

react router上的大型应用程序示例也展示了它的工作原理，我使用它作为我的项目的基础，来分割我非常大的捆绑文件
 “从服务器加载”是什么意思？该组件是否执行提取？对于React Router，除非路由匹配，否则不会呈现组件。这是不可能的，因为需要的模块实际上是将它们捆绑到一个javascript文件中，然后您一次加载所有这些文件。您如何理解“从服务器加载”呢？该组件是否执行提取？对于React Router，除非路由匹配，否则不会呈现组件。这是不可能的，因为需要的模块实际上是将它们捆绑到单个javascript文件中，您可以一次加载所有这些文件。谢谢，它会在需要时加载包括css文件（导入组件中）的组件。如果我离开这个页面（或组件），如何删除css文件？谢谢，它会在需要时加载包括css文件（导入到组件中）的组件。如果我离开这个页面（或组件），如何删除css文件？