本文介紹 react 中路由的使用宙地。在 react 中使用 路由的庫為 react-router送漠。或者是 react-router-dom狼荞。 后者與前者類似辽装，只不過在前者的基礎(chǔ)上增加了一些內(nèi)容，比如 <Link> 標(biāo)簽之類的

一相味、基本使用

1. 安裝 路由

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

2. 編寫簡單應(yīng)用示例

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 中導(dǎo)入路由

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

代碼解析：

1. 路由分為兩種 BrowserRouter 和 HashRouter拾积。兩種用法類似，表現(xiàn)形式上有一定差異丰涉。
2. <Switch> 路由中的Switch 代表只匹配一個路由拓巧，如果不使用 <Switch> 嵌套，路由會多次匹配
3. <Link> 標(biāo)簽一死，類似于 <a> 標(biāo)簽(最終也會被渲染為 a 標(biāo)簽)肛度。to 屬性即可理解為 a 標(biāo)簽的 href屬性
4. <Route> 的 path 表示屬性匹配路徑
5. <Route> 的 component 表示路徑匹配成功后渲染的組件

二、路由傳值

在 react 中 有兩種方式進(jìn)行路由傳值

1. 通過 原始的 GET 路徑后面投慈，添加 ?key=value 的方式
   • 在 組件內(nèi)部 使用 this.props.location.search的方式獲取鍵值對(只不過獲取過后還是一個字符串承耿，需要進(jìn)一步的解析)
2. 通過動態(tài)路由傳值(占位符)。類似于/a/:id/:value
   • 在組件內(nèi)部 使用 this.props.match.params.xxxx 來獲取伪煤。

三加袋、子路由的嵌套

這種情況很常見，比如 A 組件內(nèi)部抱既。還有許多其他的子組件职烧。需要路由匹配選擇對應(yīng)的子組件時，就需要使用路由嵌套

這里接收 <Route> 標(biāo)簽中的另一個屬性 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屬性 不能同時出現(xiàn)在一個 <Route> 標(biāo)記中

以上是 react-router-dom 的基本用法防泵，其他更詳細(xì)的使用方法以及使用規(guī)范可以參考其他優(yōu)秀的博文以及官方文檔蚀之。