The concept of routing

The purpose of routing is to map URLs to functions. Routing is an essential part of a single-page application. Routing configuration is a set of instructions that tells router s how to match URLs and the corresponding function mapping, that is, to execute the corresponding code.

react-router

Each JS framework will have its own custom router framework, react-router is the routing framework used by react development applications. Currently, its latest official version is 4.1.2.This article introduces you to the more flexible configuration of react-router than other router frameworks, you can choose the appropriate configuration according to your project needs.

1. Way of labeling

Let's look at an example:

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
  render() {
    return <div>Welcome to the app!</div>
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      {/* Render Dashboard when url is/ */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

We can see that this routing configuration uses the Route tag and then finds the corresponding mapping based on the component.

• Note here that IndexRoute is a slightly different label that matches'/'
  Path, because when rendering the entire App component, maybe its children has already had a'/'page before rendering. You can use IndexRoute as the first page.

• Nested routes simply add a label to the label of the Route.

2. Object Configuration

Sometimes we need to do something before we can make a route jump, such as reminding the user if a page's information has been edited and not saved.react-router provides two hook s, onLeave triggers on all routes that will leave, from the lowest child route to the outermost parent route, onEnter triggers in-route, from the outermost parent route to the lowest self-route.

Let's look at the code:

const routeConfig = [
  { path: '/',
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              //do something
            }
          }
        ]
      }
    ]
  }
]

React.render(<Router routes={routeConfig} />, document.body)

3. Routing configuration loaded on demand

Performance is an important issue in large applications, and loading JS on demand is a way to optimize performance.In React router, not only components can be loaded asynchronously, but routes can also be loaded asynchronously.Route defines getChildRoutes, getIndexRoute, and getComponents, which are all executed asynchronously and only called when needed.

Let's look at an example:

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

This approach needs to be used in conjunction with tools in the web pack that implement code splitting, which essentially splits the route into small blocks of code and loads them as needed.