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

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

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

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

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

    // App.js
import React,{Component} from "react"
export default class App extends Component {
    constructor(){
        super()
    // 我們在App.js內(nèi)部來渲染不同的組件 我們這里采用哈希路由的方式，鑒于React的渲染機(jī)制，我們需要把值綁定進(jìn)入state內(nèi)部。
        this.state={
            route:window.location.hash.substr(1)
        }
    }
    componentDidMount() {
        // 這里我們通過監(jiān)聽的方式來監(jiān)聽哈希的變化，并且來更新state促進(jìn)視圖更新
        window.addEventListener("hashchange", () => {
            console.log(window.location.hash.substr(1))
          this.setState({
            route: window.location.hash.substr(1)
          })
        })
      }
    render() {
        //在這里我們定義一個RouterView 所有的變化后的組件都會丟到這個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)聽 然后修改state來觸發(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
        )
    }
}

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

首先我們在React項目文件目錄下執(zhí)行

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

要想體驗一個新的東西，當(dāng)然是要拿自己開刀 我們改進(jìn)上面我們寫過的組件

// App.js
import React,{Component} from "react"
// 首先我們需要導(dǎo)入一些組件...
import { HashRouter as Router, Route, Link } from "react-router-dom";
// 這里有BrowserRouter 和 HashRouter 兩種模式  我比較推薦HashRouter來學(xué)習(xí) BrowserRouter需要后端配合 多帶帶前端設(shè)置 刷新會出現(xiàn)404
// 然后我們把App組件整理干凈，大概成這個樣子
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的初步體驗,怎么樣~我給大家的第一次的感覺還可以吧~

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

    

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



    

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

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

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

// 相反 如果我們沒有加 exact 的時候 /one /one/two  App都會被渲染


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

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

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

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

Link和NavLink

Link 主要api是to，to可以接受string或者一個object，來控制url。我們代碼里看看書寫方法

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

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

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

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

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

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

先來一個之前的寫法，當(dāng)然也是錯誤示例

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

                
App
                

                    
 Home
  
                    
children1
                    
children2
                
                
                    
                    
                    {/*在4.0以后的版本這樣都會報錯 那么我們應(yīng)該怎么寫呢*/}
                
           
                
            
        )
    }
}

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

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

                
App
                

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

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

            
我是Home
            
children1
            
children2
            
                 
            
        )
    }
}

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

我們用home組件來舉個例子

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

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

/*相應(yīng)的 我們在Children 組件里面有對應(yīng)的方法來獲取參數(shù)。*/

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


        return(
            

                
我是子組件1 
            
        )
    }
}

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