React Router

路由

我们访问一个 URL，最终定向到哪个资源，这部分工作的处理程序，就是路由。Web 的路由在 组件化框架 诞生之前，一直都是后端的工作，现在的前端也具有处理路由的功能，也渐渐被接受和应用。

目前最新的 React 路由版本是 router 4，这个版本比起之前的 2.x 和 3.x 要简单好用很多。

路由的安装，通过 npm install --save react-router-dom@4.3.1 命令，@后面带的是版本号，是当前时间点最新的版本。

挂载

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Link, Route, BrowserRouter} from 'react-router-dom'; // 模块导入 | React Router 包含了以下这几个主要模块
import Home from './home.js'
import List from './list.js'

// index.js
class Index extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home}/> {/* 首页 */}
          <Route exact path="/list" component={List}/> {/* 列表 */}
        </Switch>
      </BrowserRouter>
    )
  }
}

ReactDOM.render(, document.getElementById('root'));

home.js

import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return <div>首页</div>
  }
}

list.js

import React, { Component } from 'react';

export default class List extends Component {
  render() {
    return <div>列表</div>
  }
}

写完上面这些代码，我们访问 localhost:3000/ 就能定向到 home.js 而 localhost:3000/list 对应的就是 list.js。

传参

路由也是有状态的，不同状态对应不同功能，路由的参数传递，同样也是绑定在 Props属性 上面。

// index.js
class Index extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/list/:n" component={List}/> {/* 传递参数 */}
        </Switch>
      </BrowserRouter>
    )
  }
}

// list.js
export default class List extends Component {
  render() {
    return <div>列表 {this.props.match.params.n}</div> {/* 读取参数 */}
  }
}

链接

链接是一个组件到另一个组件的跳转，本质是改变另了浏览器的 URL输入。需要注意：链接的前提是 路由必须完成挂载。

class Home extends Component {
  render() {
    return (
      <div>
        <h1>首页</h1>
        <Link to="/list">点击跳转到列表</Link>
      </div>
     )
  }
}