What is the use of require.ensure in react router - reactjs

Question

I know how simple Router works like this:
<Router history={hashHistory}>
<Route path='/' component={Home} />
<Route path='/address' component={Address} />
</Router>
But I came along this type of routing, which I am not able to understand. Can somebody please explain how the following is working? Or please edit my question as more suitable to these type of routes.
I can only understand path in every Route that if I type this on browser then this Route will be triggered. But I am not able to understand what its running, what components and other things. Please tell me what this type of routing is called and more info on this.
File: 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

This routing also works same as the routing you described above. So for example
<Route name="home" path="/" getComponent={(location, cb) => {
require.ensure([], (require) => {
cb(null, require('./components/routes/home').default);
});
}}
/>
The above code will load './components/routes/home' component on "/" route.
Actually this kind of routing is usually used for code splitting (e.g. in webpack module bundler).
Usually webpack bundle the all files into a single bundle file. So in your first code
<Router history={hashHistory}>
<Route path='/' component={Home} />
<Route path='/address' component={Address} />
webpack will bundle 'home' and 'address' components into a single module.
But if you use require.ensure like the second code snippet, webpack will divide the module into multiple modules (called chunks) at each require.ensure.
This is useful because user will only download the required module at initial time. So for example if user goes to /address, then only address chunk will be downloaded at first and not home component (which can be downloaded asynchronously later).

Answer 2

That example is using require.ensure to asynchronously load components. This is most likely being done to allow for code splitting (eg. with Webpack). Code splitting allows you to split your bundle across multiple files, decreasing the amount of code that has to be sent on initial load and only requesting extra code when it is necessary. You can read more about code splitting in the Webpack documentation.
The <Route>s are using the getComponent prop, which is React Router's way for allowing asynchronously loaded components. getComponent expects a function which takes a location and a callback function. The asynchronously loaded component is passed to the <Route> using the callback function. Once the callback has been called, the loaded component will be rendered.