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.jslocalhost: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>
     )
  }
}
React 教程 React 安装 React 组件 React JSX React 样式 React 生命周期 React State React Props React 事件 React Refs React Router