preface

In the development of SPA projects, front-end routing is an unavoidable technology. In the whole SPA front-end architecture, I think it is the most basic ability to master front-end routing configuration, state management and asynchronous request encapsulation. This article mainly introduces the function of react-Router for react project and its basic configuration. Note: This article mainly based on react-Router V4 simple introduction

Reactjs Route function

React Router is the complete React routing solution. It satisfies most of the reactJS project’s routing requirements and features the following:

  • It has a simple API and powerful features
  • Implement code buffering
  • Dynamic route matching
  • Route navigation (Route interception)
  • And establish the correct position transition processing.

The react the router,

reacter-router v3.x

Composition of routing structure

  • Routing component: Router
  • Route matching component: Route
  • Route navigation component: Link

Main API details

  • Router: Keeps the UI in sync with the URL. The main property children/routes is one or more routes or plainroutes
<Router routes={... } >... </Router>Copy the code
  • Route: indicates that the Route is mapped to the component layer of the application. The path attribute is used for direct routing. The component used to match urls can also match multiple components with Components
  <Route path="/route" component={App}></Route>
Copy the code
  • IndexRoute: provides a default “child” for the parent route
  • IndexRedirect: Redirects from the URL of a parent route to another route
  • Link: Render an accessible anchor tag with the appropriate href.
<Link to={`/users/list`} activeClassName="active">{user.name}</Link>

Copy the code
  • BrowserHistory: Used to implement external jumps to components
  import { browserHistory } from 'react-router'
  browserHistory.push('/path')
Copy the code
  • OnEnter and onLeave are fired once when the page jumps to confirm
Function (nextState, replaceState) {replaceState(null, '... ')}Copy the code

The basic configuration

  • Nested syntax implementation
import React from 'react'
import { Router, Route, Link } from 'react-router'
import BasicLayout from './components/BasicLayout'

React.render((
  <Router>
    <Route path="/" component={BasicLayout}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="children/:id" component={Children2} />
      </Route>
    </Route>
  </Router>
), document.body)
Copy the code

// Base page component

const BasicLayout = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})
Copy the code
  • Native array object configuration implementation
Const routes = [{// path: '/', // renderingComponent: App, indexRoute: {component: Dashboard}, // route block onEnter: Function (nextState, replaceState) {replaceState(null, '...')} childRoutes: [// parent route configuration file {path: 'About ', component: About}, {path:' Inbox ', Component: Inbox, childRoutes: [// parent route configuration file {path: '/messages/:id', component: Message }, { path: 'messages/:id', onEnter: function (nextState, replaceState) { replaceState(null, '/messages/' + nextState.params.id) } } ] } ] } ] React.render(<Router routes={routes} />, document.body)Copy the code

react-router ~v4.x

Composition of routing structure

  • Routing components :BrowserRouter and HashRouter
  • Route matching components :Switch and Route
  • Route navigation component :Link

Main API details

  • The BrowserRouter and HashRouter routing modes are the same as history and hash in Router3
import {
  BrowserRouter as Router
} from "react-router-dom";

export default function BasicExample() {
  return (
  <Router>
   .....
  </Router>
  )}
Copy the code
  • The Switch renders the first or that is matched by the location as a child element
 <Switch>
    /
    
     <Route exact path="/">
      <Home />
     </Route>
 </Switch>
Copy the code
  • Its most basic responsibility is to render some UI when Its path matches the current URL. That is, the child component is rendered to

Note: Routes in V4 are inclusive by default, which means that multiple routes can be matched and rendered at the same time. If only one is matched, switch is required.

     <Route exact path="/">
      <Home />
     </Route>
Copy the code
  • Link: Provides declarative, accessible navigation around the application.

The basic configuration

. To be continued

React-router V3 and V4 compare

V3: Routing is handled by configuration

  • Routing in one place;
  • Layout and page layering is controlled by cascading components;
  • Layout and page components are part of routing

~ v4: Only components

  • Distributed Route Management
  • Matching principle: inclusion and exclusivity
  • Routing exists between the layout and the UI
  • Adapted to mobile applications

conclusion

Front-end routing is one of the essential functions for SPa-based projects. There is a big gap between versions after V4 and versions after V4 in React-Router. If you have never used VUE in React before, it is recommended to use the version before V4 first, because it has basically the same route definition with Vue-router. It’s all centralized, so you can get a handle on the React project quickly. If you’ve been developing with React and using V4 you’re advised to try V4, it’s hard to accept at first, but you’ll be pleasantly surprised later.