Question

我知道路由器这么简单：

<Router history={hashHistory}>
    <Route path='/' component={Home} />
    <Route path='/address' component={Address} />
</Router>

但是我遇到了这种类型的路由，我无法理解。有人可以解释以下是如何工作的吗？或者请将我的问题编辑为更适合这些类型的路线。

我只能理解每个Route中的路径，如果我在浏览器上输入此内容，则会触发此Route。但我无法理解它的运行，组件和其他东西。请告诉我这种类型的路由被调用以及更多信息。

档案：routes.js

import React from 'react';
import { Router, Route } from 'react-router';

import App from './app';

export default (
  <Router>
    <Route name="root" component={App}>
      <Route name="home" path="/" getComponent={(location, cb) => {
        require.ensure([], (require) => {
          cb(null, require('./components/routes/home').default);
        });
      }}
      />

      <Route name="homeSeries" path="/series/:series_id" getComponent={(location, cb) => {
        require.ensure([], (require) => {
          cb(null, require('./components/routes/home').default);
        });
      }}
      />
      <Route name="homeStatus" path="/status/:status" getComponent={(location, cb) => {
        require.ensure([], (require) => {
          cb(null, require('./components/routes/home').default);
        });
      }}
      />
...
...
Lots of more Route
...
...
    </Route>
  </Router>
);

Answer 1

此路由也与上述路由相同。例如，

<Route name="home" path="/" getComponent={(location, cb) => {
    require.ensure([], (require) => {
      cb(null, require('./components/routes/home').default);
    });
  }}
  />

以上代码将在“/”路径上加载“./components/routes/home”组件。

实际上这种路由通常用于代码分割（例如在webpack模块捆绑器中）。

通常，webpack将所有文件捆绑到一个捆绑文件中。所以在你的第一个代码中

<Router history={hashHistory}>
<Route path='/' component={Home} />
<Route path='/address' component={Address} />

webpack会将“home”和“address”组件捆绑到一个模块中。

但是如果你像第二个代码片段一样使用require.ensure，webpack会将模块分成每个require.ensure的多个模块（称为块）。这很有用，因为用户只能在初始时下载所需的模块。因此，例如，如果用户转到/address，则首先只下载address块，而不是home组件（可以稍后异步下载）。

Answer 2

该示例使用require.ensure异步加载组件。这很可能是为了允许代码分割（例如，使用Webpack）。代码拆分允许您将包捆绑在多个文件中，减少了在初始加载时必须发送的代码量，并且只在必要时请求额外的代码。您可以在Webpack documentation中了解有关代码拆分的更多信息。

<Route>正在使用getComponent道具，这是React Router允许异步加载组件的方法。 getComponent需要一个具有location和callback函数的函数。使用<Route>函数将异步加载的组件传递给callback。调用callback后，将呈现已加载的组件。

在反应路由器中使用require.ensure有什么用

2 个答案: