1. Understanding react-router

A plug-in library for react
 Specifically designed to implement a SPA application
 Reaction-based projects generally use this library

2. Several important issues

1). SPA applications

single page web application (SPA)
The whole application has only one complete page.
Clicking on a link in a page will not refresh the page, nor will it itself send a request to the server.
When you click on a link, only local updates are made to the page.
Data needs to be retrieved through ajax requests and displayed asynchronously on the front end

2) Routing

1. What is routing?
	A routing is a mapping relationship (key:value)
	key is the routing path, value may be function/component
 2. Routing Classification
	Background routing: node server-side routing, value is a function used to process requests submitted by clients and return a response data
	Front-end routing: Browser-side routing, value is component. When the request is routing path, browser-side does not send http requests, but the interface will update the display of the corresponding components. 
3. Background routing
	* Registered routing: router.get(path, function(req, res))
	* When a node receives a request, it finds a matching route according to the request path, calls the function in the route to process the request and returns the response data.
* Front-end routing
	* Registered routing: <Route path="/about" component={About}>
	* When the hash of the browser changes to # About, the current routing component becomes an out component

3. About url#

1. Understanding#
	'#'represents a location in a web page. The character on the right is the identifier of the location.
	Change # does not trigger page overload
	Changing # will change the browser's access history
 2. Operation#
	window.location.hash reads the # value
	window.onhashchange = func listens for hash changes
 3. Learning resources: 
	Ruan Yifeng Tutorial: http://www.ruanyifeng.com/blog/2011/03/url_hash.html

3. Reaction-router learning resources

Github home page: https://github.com/ReactTraining/react-router
 Official Course: https://github.com/reactjs/react-router-tutorial
 Ruan Yifeng Tutorial: http://www.ruanyifeng.com/blog/2016/05/react_router.html

4. Related API s

1) Relevant components in react-router:

Router: Router component, used to include various routing components
 Route: Route Component, Register Routes 
IndexRoute: Default Subrouting Component
 hashHistory: Route switching is determined by the hash change of the URL, that is, the # part of the URL changes.
Link: Routing Link Component

Router: Router component

Attribute: history={hashHistory} is used to monitor changes in the browser's address bar and parse the URL into an address object for React Router matching
 Subcomponent: Route

Route: Route component

Attribute 1: path="/xxx"  
Attribute 2: component={Xxx}
Root routing component: path="/" component, usually App
 Subrouting Components: Components with Sub < Route > Configuration

IndexRoute: Default Routing

When the parent route is requested, the routing component is requested by default.

5). hashHistory

history attributes for Router components
 Function: Generate address url? _k=hash for internal storage of the corresponding state

Link: Routing Links

Attribute 1: to="/xxx"
Attribute 2: activeClassName="active"

5. Basic use of react-router

1. Download

npm install react-router --save

2. Define each routing component

1. About.js
  import React from 'react'
  function About() {
    return <div>About Component content</div>
  }
  export default About
2. Home.js
  import React from 'react'
  function Home() {
    return <div>Home Component Content 2</div>
  }
  export default Home
3. Repos.js
  import React, {Component} from 'react'
  export default class Repos extends Component {
    render() {
      return (
        <div>Repos assembly</div>
      )
    }
  }
4. App.js
import React, {Component} from 'react'
import {Link} from 'react-router'

export default class App extends Component {
  render() {
    return (
      <div>
        <h2>Hello, React Router!</h2>
        <ul>
          <li><Link to="/about" activeClassName="active">About2</Link></li>
          <li><Link to="/repos" activeClassName="active">Repos2</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

3. Index.js: Register Routes, Render Router Labels

import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Home from './modules/Home'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/about" component={About}></Route>
      <Route path="/repos" component={Repos}></Route>
    </Route>
  </Router>
), document.getElementById('app'))

Home page: index.html

<style>
  .active {
    color: red;
  }
</style>

6. Pass request parameters to routing components

Repo.js: Subrouting Components under Repos Components

import React from 'react'
export default function ({params}) {
  let {username, repoName} = params
  return (
    <div>User name:{username}, Warehouse name:{repoName}</div>
  )
}

2). repos.js

import React from 'react'
import NavLink from './NavLink'

export default class Repos extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      repos: [
        {username: 'faceback', repoName: 'react'},
        {username: 'faceback', repoName: 'react-router'},
        {username: 'Angular', repoName: 'angular'},
        {username: 'Angular', repoName: 'angular-cli'}
      ]
    };
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit () {

    const repos = this.state.repos
    repos.push({
      username: this.refs.username.value,
      repoName: this.refs.repoName.value
    })
    this.setState({repos})
    this.refs.username.value = ''
    this.refs.repoName.value = ''
  }

  render() {
    return (
      <div>
        <h2>Repos</h2>
        <ul>
          {
            this.state.repos.map((repo, index) => {
              const to = `/repos/${repo.username}/${repo.repoName}`
              return (
                <li key={index}>
                  <Link to={to} activeClassName='active'>{repo.repoName}</Link>
                </li>
              )
            })
          }
          <li>
            <form onSubmit={this.handleSubmit}>
              <input type="text" placeholder="User name" ref='username'/> / {' '}
              <input type="text" placeholder="Warehouse name" ref='repoName'/>{' '}
              <button type="submit">Add to</button>
            </form>
          </li>
        </ul>
        {this.props.children}
      </div>
    );
  }
}

3. index. js: Configuring routing

<Route path="/repos" component={Repos}>
  <Route path="/repos/:username/:repoName" component={Repo}/>
</Route>

7. Optimizing Link Components

1). NavLink.js

import React from 'react'
import {Link} from 'react-router'
export default function NavLink(props) {
  return <Link {...props} activeClassName="active"/>
}

2). Repos.js

<NavLink to={to}>{repo.repoName}</NavLink>