摘要：我們?cè)趦?nèi)部來(lái)渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機(jī)制，我們需要把值綁定進(jìn)入內(nèi)部。

手挽手帶你學(xué)React入門(mén)三檔,帶你學(xué)會(huì)使用Reacr-router4.x,開(kāi)始創(chuàng)建屬于你的React項(xiàng)目

React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫(kù)，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁(yè)面與 URL 間的同步。通俗一點(diǎn)就是，它幫助我們的程序在不同的url展示不同的內(nèi)容。

我們開(kāi)發(fā)的時(shí)候，不可能所有的東西都展示在一張頁(yè)面上，在業(yè)務(wù)場(chǎng)景的要求下，我們要根據(jù)不同的URL或者不同的哈希來(lái)展示不同的組件，這個(gè)我們可以稱它為路由。在我們不使用React-router的時(shí)候，我們?nèi)绾稳プ雎酚赡兀?/p>

我在這里給大家舉個(gè)例子，不使用React-router，來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單路由。

    // App.js
import React,{Component} from "react"
export default class App extends Component {
    constructor(){
        super()
    // 我們?cè)贏pp.js內(nèi)部來(lái)渲染不同的組件 我們這里采用哈希路由的方式，鑒于React的渲染機(jī)制，我們需要把值綁定進(jìn)入state內(nèi)部。
        this.state={
            route:window.location.hash.substr(1)
        }
    }
    componentDidMount() {
        // 這里我們通過(guò)監(jiān)聽(tīng)的方式來(lái)監(jiān)聽(tīng)哈希的變化，并且來(lái)更新state促進(jìn)視圖更新
        window.addEventListener("hashchange", () => {
            console.log(window.location.hash.substr(1))
          this.setState({
            route: window.location.hash.substr(1)
          })
        })
      }
    render() {
        //在這里我們定義一個(gè)RouterView 所有的變化后的組件都會(huì)丟到這個(gè)RouterView中
        let RouterView = App
        switch (this.state.route) {
            case "/children1":
            RouterView = Children
                break;
            case "/children2":
            RouterView = ChildrenTwo
                break;
            default:
            RouterView = Home
                break;
        }
        return (
            
    
                
App
                

                    
children1
  
                    {/* 點(diǎn)擊更改哈希值 這里觸發(fā)我們的監(jiān)聽(tīng) 然后修改state來(lái)觸發(fā)組件的重新傳染 */}
                    
children2
                
                
            
        )
    }
}

// 為了展示效果定義子組件一

class Children extends Component{
    constructor(){
        super()
        this.state={
           
        }
    }
    render(){
        return(
            

                
我是子組件1
                
            
        )
    }
}

// 為了展示效果定義子組件二

class ChildrenTwo extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){
        return(
            

                
我是子組件2
            
        )
    }
}
// 為了展示效果定義Home組件
class Home extends Component{
    constructor(){
        super()
    }
    render(){
        return(
            
我是Home
        )
    }
}

這樣我們通過(guò)監(jiān)聽(tīng)哈希變化的方式實(shí)現(xiàn)了我們的第一個(gè)簡(jiǎn)單路由，是不是對(duì)于路由的原理有了那么一丟丟的認(rèn)識(shí)呢？接下來(lái)我們想象一個(gè)場(chǎng)景，這么一個(gè)路由出現(xiàn)了/children1/user/about/1，看到這里是不是覺(jué)得，用switch case已經(jīng)蒙B了？我們接下來(lái)就要使用到React-router了，這個(gè)東西可不需要我們自己去寫(xiě)一大串的switch case了，并且性能啊，整潔度啊等等等方面都比我們自己寫(xiě)的好多了！

首先我們?cè)赗eact項(xiàng)目文件目錄下執(zhí)行

npm install react-router-dom --save
npm install react-router --save

要想體驗(yàn)一個(gè)新的東西，當(dāng)然是要拿自己開(kāi)刀 我們改進(jìn)上面我們寫(xiě)過(guò)的組件

// App.js
import React,{Component} from "react"
// 首先我們需要導(dǎo)入一些組件...
import { HashRouter as Router, Route, Link } from "react-router-dom";
// 這里有BrowserRouter 和 HashRouter 兩種模式  我比較推薦HashRouter來(lái)學(xué)習(xí) BrowserRouter需要后端配合 多帶帶前端設(shè)置 刷新會(huì)出現(xiàn)404
// 然后我們把App組件整理干凈，大概成這個(gè)樣子
export default class App extends Component {
    constructor(){
        super()
        this.state={
          
        }
    }
    render() {
        return (
            
                

                
App
                

                    
 Home
  
                    
children1
                    
children2
                
                
                
                
                
            
        )
    }
}

// 為了展示效果定義子組件一
class Children extends Component{
    constructor(){
        super()
        this.state={
           
        }
    }
    render(){
        return(
            

                
我是子組件1
            
        )
    }
}
// 為了展示效果定義子組件二
class ChildrenTwo extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){
        return(
            

                
我是子組件2
            
        )
    }
}
// 為了展示效果定義Home組件
class Home extends Component{
    constructor(){
        super()
    }
    render(){
        return(
            
我是Home
        )
    }
}

這里我們就完成了React-router4.X的初步體驗(yàn),怎么樣~我給大家的第一次的感覺(jué)還可以吧~

Routers
在React-router4.0中，Routers有兩個(gè)表現(xiàn)方式 和 這兩個(gè)標(biāo)簽都將會(huì)給你創(chuàng)建一個(gè)專門(mén)的history對(duì)象，BrowserRouter的表現(xiàn)模式需要搭配一個(gè)可以響應(yīng)請(qǐng)求的服務(wù)器。HashRouter是靜態(tài)文件服務(wù)器，我們本地開(kāi)發(fā)的時(shí)候，建議使用HashRouter。這里需要注意一下，BrowserRouter和 HashRouter標(biāo)簽下面，只允許存在一個(gè)標(biāo)簽 具體寫(xiě)法如下

    

        {/*其余內(nèi)容寫(xiě)在這里面*/}
    



    

        {/*其余內(nèi)容寫(xiě)在這里面*/}
    

Route
注意，最外層的是Router 這里是 Route 這是我們的路由匹配組件，它有兩個(gè) Route和Switch
Route 組件擁有多個(gè)屬性，這在我們后期的路由傳參中將會(huì)用到。這里我們需要簡(jiǎn)單了解幾個(gè)屬性 path component exact strict
path 是我們匹配的地址，當(dāng)?shù)刂菲ヅ涞臅r(shí)候 我們才會(huì)去渲染 component內(nèi)的組件內(nèi)容
path 后面如果書(shū)寫(xiě)模式帶了 /: 這樣的內(nèi)容，那么這里將會(huì)成為占位符 我們可以利用占位符來(lái)取到對(duì)應(yīng)路徑的參數(shù) 使用 this.props.match.params+占位符的名字 即可拿到
exact 屬性來(lái)規(guī)定我們是否嚴(yán)格匹配
strict 則是嚴(yán)格匹配模式 我們規(guī)定的路徑使用/one/來(lái)書(shū)寫(xiě) 如果沒(méi)有完全匹配 /one/ 則不會(huì)展示

// 這里我們加了exact 那么 路徑完全等于/one的時(shí)候才會(huì)渲染App /one/  one  /one/two 后面這三種情況均不會(huì)渲染App

// 相反 如果我們沒(méi)有加 exact 的時(shí)候 /one /one/two  App都會(huì)被渲染


// 我們加了 strict 以后 /one 將不會(huì)渲染App  而如果沒(méi)有 strict 這種情況下 /one 是可以渲染App的

同時(shí)React-router給我們提供了一個(gè)Switch標(biāo)簽 在這個(gè)標(biāo)簽內(nèi) 我們只會(huì)渲染一個(gè)Route 并且使第一個(gè)符合條件的Route 這是什么意思呢？我們來(lái)看代碼

在這樣的路由下 我們匹配/about 會(huì)發(fā)現(xiàn) 所有的路由都可以匹配到并且渲染了出來(lái)，這肯定不是我們想要的結(jié)果 于是我們給它嵌套一個(gè) Switch

這時(shí)候我們就只會(huì)匹配到第一個(gè)/about,僅僅渲染About,大家根據(jù)實(shí)際需求去決定是否嵌套Switch使用

Link和NavLink

Link 主要api是to，to可以接受string或者一個(gè)object，來(lái)控制url。我們代碼里看看書(shū)寫(xiě)方法

     
    // 這就是路由到one 搭配Router使用 當(dāng)然我們可以使用一個(gè)對(duì)象

    
    // 這樣我們點(diǎn)擊link不僅可以到one 還可以傳遞一些參數(shù)

NavLink 它可以為當(dāng)前選中的路由設(shè)置類名、樣式以及回調(diào)函數(shù)等。使用如下

     
    // 這就是路由到one 搭配Router使用 當(dāng)然我們可以使用一個(gè)對(duì)象

    
    // 這里的exact 同樣是嚴(yán)格比配模式 同Route
    // 這樣我們可以為當(dāng)前選中的路由設(shè)置樣式了

在react-router4之前的版本，子路由通過(guò)路由嵌套就可以實(shí)現(xiàn)了，但是這一個(gè)方法到了React-router4中就行不通了

先來(lái)一個(gè)之前的寫(xiě)法，當(dāng)然也是錯(cuò)誤示例

export default class App extends Component {
    constructor(){
        super()
        this.state={
          
        }
    }
    render() {
        return (
            
                

                
App
                

                    
 Home
  
                    
children1
                    
children2
                
                
                    
                    
                    {/*在4.0以后的版本這樣都會(huì)報(bào)錯(cuò) 那么我們應(yīng)該怎么寫(xiě)呢*/}
                
           
                
            
        )
    }
}

在react-router4.x版本中 我們子路由必須要在子組件內(nèi)部了

export default class App extends Component {
    constructor(){
        super()
        this.state={
          
        }
    }
    render() {
        return (
            
                

                
App
                

                    
 Home
  
                    {/* 同樣 這兩個(gè)link讓他們轉(zhuǎn)移到Home中 我們的home組件就變成了下面的樣子 */}
                
                
                 {/**/}  
                 {/**/}  
                    {/*先把這里注釋掉 然后我們來(lái)到Home組件內(nèi)*/}
                
           
                
            
        )
    }
}

// home內(nèi)部用{this.props.match.url+子路由路徑}來(lái)獲取當(dāng)前的路徑并且加上我們要路由到的位置來(lái)進(jìn)行路由匹配和路徑跳轉(zhuǎn)匹配 這樣書(shū)寫(xiě) Children和ChildrenTwo就是home的子路由了
class Home extends Component{
    constructor(){
        super()
    }
    
    render(){
        return(
            

            
我是Home
            
children1
            
children2
            
                 
            
        )
    }
}

聲明式跳轉(zhuǎn)上面已經(jīng)說(shuō)過(guò)了 Link和NavLink 兩個(gè)標(biāo)簽就可以滿足了 我們主要說(shuō)一下js跳轉(zhuǎn)
在4.0剛剛發(fā)布的時(shí)候 this.props.history.push("路徑")這個(gè)方法已經(jīng)行不通了，不過(guò)值得慶幸的是，我現(xiàn)在所使用的4.3.1版本又可以使用這個(gè)方法來(lái)進(jìn)行js路由跳轉(zhuǎn)了。

我們用home組件來(lái)舉個(gè)例子

class Home extends Component{
    constructor(){
        super()
    }
    toPath=(home)=>{
        console.log(123)
        this.props.history.push({  //我們把要傳參的東西都放在push對(duì)象內(nèi)了
            pathname:home,   //我們要到達(dá)哪個(gè)路由
            search:"?a=1",   //明文傳參的模式
            query:{"type":"type"}, //query對(duì)象傳參
            state:{          //state對(duì)象傳參
                b:456
            }
        })
    // this.props.history.push("/123")
    }
    render(){
        return(
            

            
{this.toPath(`${this.props.match.url}/children1/123`)}}>我是Home
            
children1
            
children2
            
                 
            
        )
    }
}

/*相應(yīng)的 我們?cè)贑hildren 組件里面有對(duì)應(yīng)的方法來(lái)獲取參數(shù)。*/

class Children extends Component{
    constructor(){
        super()
        this.state={
           
        }
    }
    render(){
        console.log(this.props.match.params.id)  //這種是通過(guò)路徑上面的:id傳過(guò)來(lái)的參數(shù)
        console.log(this.props.location.query)  //這是通過(guò)push的參數(shù)對(duì)象中的query傳過(guò)來(lái)的 和vue的query有區(qū)別 它不在地址欄 刷新丟失
        console.log(this.props.location.state)  //這是通過(guò)push的參數(shù)對(duì)象中的state傳過(guò)來(lái)的 它不在地址欄 刷新丟失
        console.log(this.props.location.search)  //暴露在地址欄，需要自行處理獲取數(shù)據(jù)


        return(
            

                
我是子組件1 
            
        )
    }
}

這一期我們主要還是講了react-router4.x的基礎(chǔ)使用和傳參方法，react-router4.x坑比較多，不過(guò)使用熟練了會(huì)讓你感覺(jué)很爽，大家不要吝嗇自己的時(shí)間多多學(xué)習(xí)，博客開(kāi)通了注冊(cè)投稿功能，如果大家有好的學(xué)習(xí)文章，經(jīng)典總結(jié)，可以投稿，可以掃碼加我微信申請(qǐng)專欄~感謝大家的閱讀和觀看。