react-router-dom 的基本使用

本文介绍 react 中路由的使用。在 react 中使用 路由的库为 react-router。或者是 react-router-dom。 后者与前者类似，只不过在前者的基础上增加了一些内容，比如 <Link> 标签之类的

一、基本使用

1. 安装 路由

$ npm i react-router-dom --save --registry=https://registry.npm.taobao.org

2. 编写简单应用示例

import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'

function A() {
  return (
    <div>我是 A 组件</div>
  )
}

function B() {
  return (
    <div> 我是 B 组件</div>
  )
}
export default function R() {
  return (
    <Router>
      <ul>
        <li><Link to="/a">A 组件</Link></li>
        <li><Link to="/b">B 组件</Link></li>
        <li><Link to="/e">E 组件</Link></li>
      </ul>
      <Route>
        <Switch>
          <Route path="/a" component={A} />
          <Route path="/b" component={B} />
          <Route path="/" component={A} />
        </Switch>
      </Route>
    </Router>
  )
}

3. 在 App.js 中导入路由

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router.js' // 路由文件
ReactDOM.render(<Router />, document.getElementById('root'))

代码解析：

1. 路由分为两种 BrowserRouter 和 HashRouter。两种用法类似，表现形式上有一定差异。
2. <Switch> 路由中的Switch 代表只匹配一个路由，如果不使用 <Switch> 嵌套，路由会多次匹配
3. <Link> 标签，类似于 <a> 标签(最终也会被渲染为 a 标签)。to 属性即可理解为 a 标签的 href属性
4. <Route> 的 path 表示属性匹配路径
5. <Route> 的 component 表示路径匹配成功后渲染的组件

二、路由传值

在 react 中 有两种方式进行路由传值

1. 通过 原始的 GET 路径后面，添加 ?key=value 的方式
   • 在 组件内部 使用 this.props.location.search的方式获取键值对(只不过获取过后还是一个字符串，需要进一步的解析)
2. 通过动态路由传值(占位符)。类似于/a/:id/:value
   • 在组件内部 使用 this.props.match.params.xxxx 来获取。

三、子路由的嵌套

这种情况很常见，比如 A 组件内部。还有许多其他的子组件。需要路由匹配选择对应的子组件时，就需要使用路由嵌套

这里接收 <Route> 标签中的另一个属性 render

示例

import React from 'react'
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom'
function A(props) {
  return (
    <div>
      我是 A 组件

      <ul>
        <li><Link to="/a/com1">A com1</Link></li>
        <li><Link to="/a/com2">A com2</Link></li>
        <li><Link to="/a/com3">A com3</Link></li>
      </ul>

      {props.children}
    </div>
  )
}

function B(props) {
  return (
    <div>
      我是 B 组件

      <ul>
        <li><Link to="/b/com1">B com1</Link></li>
        <li><Link to="/b/com2">B com2</Link></li>
        <li><Link to="/b/com3">B com3</Link></li>
      </ul>

      {props.children}
    </div>
  )
}

function ACom1() {
  return (
    <div>
      A Com1 组件
    </div>
  )
}
// .. ACom2
// .. ACom3

function BCom1() {
  return (
    <div>
      B Com1 组件
    </div>
  )
}
// ...BCom1
// ...Bcom3

export default function() {

  return (
    <Router>
      <Switch>
        <Route path="/a" render={() => (
          <A>
            <Switch>
              <Route path="/a/com1" component={ACom1}/>
              <Route path="/a/com2" component={ACom2}/>
              <Route path="/a/com3" component={ACom3}/>
            </Switch>
          </A>
        )}/>
        <Route path="/b" render={() => (
          <B>
            <Switch>
              <Route path="/b/com1" component={BCom1}/>
              <Route path="/b/com2" component={BCom2}/>
              <Route path="/b/com3" component={BCom3}/>
            </Switch>
          </B>
        )}/>
      </Switch>
    </Router>
  )
}

1. {this.props.children} 表示子组件渲染的位置
   需要特别注意的是：component属性 和 render属性 不能同时出现在一个 <Route> 标记中

以上是 react-router-dom 的基本用法，其他更详细的使用方法以及使用规范可以参考其他优秀的博文以及官方文档。