React路由（基礎）

Router

1.安裝router

cnpm i react-router-dom -S

2.在最頂層引入router(只有最頂層才須要Router，一個app只須要一個Router)

import { BrowserRouter as Router } from 'react-router-dom'
複製代碼

或者

import { HashRouter as Router } from 'react-router-dom'
複製代碼

3.Route建立

用於根據path渲染，path屬性是一個字符串，還有一個component，render方法，使用route組件渲染的組件，內部能夠直接經過this.props去獲取路由相關信息

用Route組件渲染的組件，內部能夠經過this.props去獲取路由相關信息，好比history, match,location這些對象，最好的方式是在內部把console.log(this.props)

(1)component方法

組件會直接渲染，能夠直接在Home組件中,經過this.props來獲取到router的一些操做方法

// 父組件
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
    <Route path='/home' component={Home} />
</Router>
複製代碼

// 子組件
import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        主頁
      </div>
    )
  }
}
複製代碼

訪問home頁面

打印this.props

(2)render(這種叫作renderProps中)

使用render自定義渲染，渲染的結果返回一個element或者component，這個render是一個方法，這個方法的參數就是router相關的一些props

注意：

這裏必定得把props擴展傳遞到組件裏，要否則，在組件裏，就不能經過 this.props來獲取到router的一些操做方法 及屬性

// 父組件
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
    <Route path="/about" render={(props) => {
          return (
            <div>
              <h3>關於咱們</h3>
              <About {...props} />
            </div>
          )
        }} />
</Router>
複製代碼

// 子組件
import React, { Component } from 'react'

export default class About extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        關於
      </div>
    )
  }
}
複製代碼

訪問about頁面

4.Link(NavLink)

用於跳轉，必須有一個to參數，to參數能夠是一個字符串路徑，也能夠是一個對象，對象能夠經過state來傳遞參數，this.props.history.push(這裏和Link組件的to一致)

<Link to="/home">主頁</Link>
<Link to="/about">關於</Link>
複製代碼

5.exact屬性

徹底匹配path的時候，纔會渲染，若是有一丁點兒不匹配，就不會渲染

6.Redirect重定向

<Redirect to="/home" from="/" />
複製代碼

7.Switch

只會匹配一個子組件，只要匹配到一個，就不會再往下匹配，因此，在配置路由的時候，可能須要注意一下順序

<Switch>
    <Route />
</Switch>
複製代碼

8.withRouter高階組件（截持渲染）

用於沒有經過Route渲染的任意組件的props上注入路由相關的props

Home是一個組件
export default withRouter(Home)
複製代碼

9.裝飾器模式

cnpm i babel-plugin-transform-decorators-legacy -D
複製代碼

@withRouter
複製代碼