The React-Router version used in this article is 2.8.1

The React Router has its own on-demand loading solution, which splits code into packages that load on demand while browsing.

If your project is packaged with webpack, add chunkFilename to the output of webpack.config.js

output: {
    path: path.join(__dirname, '/.. /dist/assets'),
    filename: 'app.js', publicPath: defaultSettings. PublicPath, / / add chunkFilename chunkFilename:'[name].[chunkhash:5].chunk.js',},Copy the code

Name is the name specified in the code to create chunk. If this is not specified in the code, webPack assigns the ID number as the name by default. Chunkhash is the hash code of the file. Because the hash code is long, only the first five digits are used here.

Instead of loading components dynamically, we need to replace Component with getComponent. First remove the route and create a rootRoute rootRoute:

const rootRoute = {
  path: '/',
  indexRoute: {
    getComponent(nextState, cb) {
      require.ensure([], (require) => {
        cb(null, require('components/layer/HomePage'))},'HomePage')
    },
  },
  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/Main'))},'Main')
  },
  childRoutes: [
    require('./routes/baidu'),
    require('./routes/404'),
    require('./routes/redirect')
  ]
}

ReactDOM.render(
  (
    <Router
      history={browserHistory}
      routes={rootRoute}
      />
  ), document.getElementById('root'));Copy the code

There are four attributes:

Path needless to say, match routes;

GetComponent corresponds to the previous Component property, but this method is asynchronous, meaning it is called when the route matches.

There’s a require. Ensure method

require.ensure(dependencies, callback, chunkName)
Copy the code

This is the method provided by WebPack, which is also the core method of loading on demand. The first argument is the dependency, the second is the callback function, and the third is the aforementioned chunkName, which specifies the name of the chunk file.

IndexRoute is used to set the home page. Note the indexRoute notation here. This is an object, inside which getComponent is used.

ChildRoutes childRoutes placed inside this is the configuration of childRoutes, corresponding to the previous childRoutes. We have stripped out the previous /baidu, /404, and * and will create the routing configuration for them respectively.

In the childRoutes section of routing control, we require three childRoutes, create a routes directory under the directory, and place the three routes in it.

Routes / ├ ─ ─ 404 │ └ ─ ─ index. The js ├ ─ ─ they │ ├ ─ ─ index. The js │ └ ─ ─ routes │ ├ ─ ─ frequency │ │ └ ─ ─ index. The js │ └ ─ ─ the result │ └ ─ ─ └─ redirect └─ index.txtCopy the code

Like rootRoute, each index.js is a routing object: /404/index.js

module.exports = {
  path: '404',

  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/layer/NotFoundPage'))},'NotFoundPage')}}Copy the code

/baidu/index.js

module.exports = {
  path: 'baidu',

  getChildRoutes(partialNextState, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/result'),
        require('./routes/frequency')
      ])
    })
  },

  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/layer/BaiduPage'))},'BaiduPage')}}Copy the code

/baidu/routes/frequency/index.js

module.exports = {
  path: 'frequency',
  getComponent(nextState, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/layer/BaiduFrequencyPage'))},'BaiduFrequencyPage')}}Copy the code

Etc. · · · · · · · · · · · · · · · ·

Let’s talk about setting the Redirect

We need to separate the redirect from the * route, for which we have created a redirect directory above. Use the onEnter method and redirect from this method to another route:

/redirect/index.js official example

module.exports = {
  path: The '*',
  onEnter: (_, replaceState) => replaceState(null, "/ 404")}Copy the code