從零開始學React：三檔 React-router4.x的使用

Mr.奇淼發表於2019-02-13
React

手挽手帶你學React入門三檔,帶你學會使用Reacr-router4.x,開始建立屬於你的React專案

視訊教程

什麼是React-router

React Router 是一個基於 React 之上的強大路由庫，它可以讓你嚮應用中快速地新增檢視和資料流，同時保持頁面與 URL 間的同步。通俗一點就是，它幫助我們的程式在不同的url展示不同的內容。

為什麼要用React-router

我們開發的時候，不可能所有的東西都展示在一張頁面上，在業務場景的要求下，我們要根據不同的URL或者不同的雜湊來展示不同的元件，這個我們可以稱它為路由。在我們不使用React-router的時候，我們如何去做路由呢？

我在這裡給大家舉個例子，不使用React-router，來實現一個簡單路由。

    // App.js
import React,{Component} from 'react'
export default class App extends Component {
    constructor(){
        super()
    // 我們在App.js內部來渲染不同的元件 我們這裡採用雜湊路由的方式，鑑於React的渲染機制，我們需要把值繫結進入state內部。
        this.state={
            route:window.location.hash.substr(1)
        }
    }
    componentDidMount() {
        // 這裡我們通過監聽的方式來監聽雜湊的變化，並且來更新state促進檢視更新
        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 (
            <div>    
                <h1>App</h1>
                <ul>
                    <li><a href="#/children1">children1</a></li>  
                    {/* 點選更改雜湊值 這裡觸發我們的監聽 然後修改state來觸發元件的重新傳染 */}
                    <li><a href="#/children2">children2</a></li>
                </ul>
                <RouterView/>
            </div>
        )
    }
}

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

class Children extends Component{
    constructor(){
        super()
        this.state={
           
        }
    }
    render(){
        return(
            <div>
                <h1>我是子元件1</h1>
                
            </div>
        )
    }
}

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

class ChildrenTwo extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){
        return(
            <div>
                <h1>我是子元件2</h1>
            </div>
        )
    }
}
// 為了展示效果定義Home元件
class Home extends Component{
    constructor(){
        super()
    }
    render(){
        return(
            <h1>我是Home</h1>
        )
    }
}

複製程式碼

這樣我們通過監聽雜湊變化的方式實現了我們的第一個簡單路由，是不是對於路由的原理有了那麼一丟丟的認識呢？接下來我們想象一個場景，這麼一個路由出現了/children1/user/about/1，看到這裡是不是覺得，用switch case已經蒙B了？我們接下來就要使用到React-router了，這個東西可不需要我們自己去寫一大串的switch case了，並且效能啊，整潔度啊等等等方面都比我們自己寫的好多了！

React-router 初體驗

首先我們在React專案檔案目錄下執行

npm install react-router-dom --save
npm install react-router --save
複製程式碼

要想體驗一個新的東西，當然是要拿自己開刀 我們改進上面我們寫過的元件

// App.js
import React,{Component} from 'react'
// 首先我們需要匯入一些元件...
import { HashRouter as Router, Route, Link } from "react-router-dom";
// 這裡有BrowserRouter 和 HashRouter 兩種模式  我比較推薦HashRouter來學習 BrowserRouter需要後端配合 單獨前端設定 重新整理會出現404
// 然後我們把App元件整理乾淨，大概成這個樣子
export default class App extends Component {
    constructor(){
        super()
        this.state={
          
        }
    }
    render() {
        return (
            <Router>
                <div>
                <h1>App</h1>
                <ul>
                    <li> <Link to="/">Home</Link></li>  
                    <li><Link to="/children1/">children1</Link></li>
                    <li><Link to="/children2/">children2</Link></li>
                </ul>
                <Route exact path="/" component={Home} />
                <Route path="/children1" component={Children} />
                <Route path="/children2" component={ChildrenTwo} />
                </div>
            </Router>
        )
    }
}

// 為了展示效果定義子元件一
class Children extends Component{
    constructor(){
        super()
        this.state={
           
        }
    }
    render(){
        return(
            <div>
                <h1>我是子元件1</h1>
            </div>
        )
    }
}
// 為了展示效果定義子元件二
class ChildrenTwo extends Component{
    constructor(){
        super()
        this.state={
        
        }
    }
    render(){
        return(
            <div>
                <h1>我是子元件2</h1>
            </div>
        )
    }
}
// 為了展示效果定義Home元件
class Home extends Component{
    constructor(){
        super()
    }
    render(){
        return(
            <h1>我是Home</h1>
        )
    }
}
複製程式碼

這裡我們就完成了React-router4.X的初步體驗,怎麼樣~我給大家的第一次的感覺還可以吧~

基本元件

Routers 在React-router4.0中，Routers有兩個表現方式 <BrowserRouter> 和 <HashRouter> 這兩個標籤都將會給你建立一個專門的history物件，BrowserRouter的表現模式需要搭配一個可以響應請求的伺服器。HashRouter是靜態檔案伺服器，我們本地開發的時候，建議使用HashRouter。這裡需要注意一下，BrowserRouter和 HashRouter標籤下面，只允許存在一個標籤 具體寫法如下


<BrowserRouter>
    <div>
        {/*其餘內容寫在這裡面*/}
    </div>
</BrowserRouter>

<HashRouter>
    <div>
        {/*其餘內容寫在這裡面*/}
    </div>
</HashRouter>

複製程式碼

Route 注意，最外層的是Router 這裡是 Route 這是我們的路由匹配元件，它有兩個 Route和Switch Route 元件擁有多個屬性，這在我們後期的路由傳參中將會用到。這裡我們需要簡單瞭解幾個屬性 path component exact strict path 是我們匹配的地址，當地址匹配的時候 我們才會去渲染 component內的元件內容 path 後面如果書寫模式帶了 /: 這樣的內容，那麼這裡將會成為佔位符 我們可以利用佔位符來取到對應路徑的引數 使用 this.props.match.params+佔位符的名字 即可拿到 exact 屬性來規定我們是否嚴格匹配 strict 則是嚴格匹配模式 我們規定的路徑使用/one/來書寫 如果沒有完全匹配 /one/ 則不會展示

<Route exact path="/one" component={App} />
// 這裡我們加了exact 那麼 路徑完全等於/one的時候才會渲染App /one/  one  /one/two 後面這三種情況均不會渲染App

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

<Route strict path="/one/" component={App} />
// 我們加了 strict 以後 /one 將不會渲染App  而如果沒有 strict 這種情況下 /one 是可以渲染App的

複製程式碼

同時React-router給我們提供了一個Switch標籤 在這個標籤內 我們只會渲染一個Route 並且使第一個符合條件的Route 這是什麼意思呢？我們來看程式碼


<Route path="/about" component={About} />
<Route path="/:User" component={User} />
<Route path="/" component={Home} />
<Route component={NoMatch} />

複製程式碼

在這樣的路由下 我們匹配/about 會發現 所有的路由都可以匹配到並且渲染了出來，這肯定不是我們想要的結果 於是我們給它巢狀一個 Switch

<Switch>
    <Route path="/about" component={About} />
    <Route path="/:User" component={User} />
    <Route path="/" component={Home} />
    <Route component={NoMatch} />
</Switch>
複製程式碼

這時候我們就只會匹配到第一個/about,僅僅渲染About,大家根據實際需求去決定是否巢狀Switch使用

Link和NavLink

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

    <Link to='/one/' /> 
    // 這就是路由到one 搭配Router使用 當然我們可以使用一個物件

    <Link to={{
        pathname:'/one',
        search:'?name=qm',
        hash:'#two',
        state:{
            myName:'qimiao'
        }
    }} />
    // 這樣我們點選link不僅可以到one 還可以傳遞一些引數
複製程式碼

NavLink 它可以為當前選中的路由設定類名、樣式以及回撥函式等。使用如下

    <NavLink exact activeClassName='navLink' to='/one/' /> 
    // 這就是路由到one 搭配Router使用 當然我們可以使用一個物件

    <NavLink exact activeClassName='navLink' to={{
        pathname:'/one',
        search:'?name=qm',
        hash:'#two',
        state:{
            myName:'qimiao'
        }
    }} />
    // 這裡的exact 同樣是嚴格比配模式 同Route
    // 這樣我們可以為當前選中的路由設定樣式了
複製程式碼

子路由的書寫

在react-router4之前的版本，子路由通過路由巢狀就可以實現了，但是這一個方法到了React-router4中就行不通了

先來一個之前的寫法，當然也是錯誤示例

export default class App extends Component {
    constructor(){
        super()
        this.state={
          
        }
    }
    render() {
        return (
            <Router>
                <div>
                <h1>App</h1>
                <ul>
                    <li> <Link to="/home">Home</Link></li>  
                    <li><Link to="/children1/">children1</Link></li>
                    <li><Link to="/children2/">children2</Link></li>
                </ul>
                <Route path="/home" component={Home} >
                    <Route path="children1" component={Children} />
                    <Route path="children2" component={ChildrenTwo} />
                    {/*在4.0以後的版本這樣都會報錯 那麼我們應該怎麼寫呢*/}
                </Route>
           
                </div>
            </Router>
        )
    }
}
複製程式碼

在react-router4.x版本中 我們子路由必須要在子元件內部了

export default class App extends Component {
    constructor(){
        super()
        this.state={
          
        }
    }
    render() {
        return (
            <Router>
                <div>
                <h1>App</h1>
                <ul>
                    <li> <Link to="/home">Home</Link></li>  
                    {/* 同樣 這兩個link讓他們轉移到Home中 我們的home元件就變成了下面的樣子 */}
                </ul>
                <Route path="/home" component={Home} >
                 {/*<Route path="children1" component={Children} />*/}  
                 {/*<Route path="children2" component={ChildrenTwo} />*/}  
                    {/*先把這裡註釋掉 然後我們來到Home元件內*/}
                </Route>
           
                </div>
            </Router>
        )
    }
}

// home內部用{this.props.match.url+子路由路徑}來獲取當前的路徑並且加上我們要路由到的位置來進行路由匹配和路徑跳轉匹配 這樣書寫 Children和ChildrenTwo就是home的子路由了
class Home extends Component{
    constructor(){
        super()
    }
    
    render(){
        return(
            <div>
            <h1>我是Home</h1>
            <li><Link to={`${this.props.match.url}/children1`}>children1</Link></li>
            <li><Link to={`${this.props.match.url}/children2`}>children2</Link></li>
            <Route path={`${this.props.match.url}/children1`} component={Children} />
            <Route path={`${this.props.match.url}/children2`} component={ChildrenTwo} />     
            </div>
        )
    }
}
複製程式碼

路由跳轉

宣告式跳轉上面已經說過了 Link和NavLink 兩個標籤就可以滿足了 我們主要說一下js跳轉 在4.0剛剛釋出的時候 this.props.history.push('路徑')這個方法已經行不通了，不過值得慶幸的是，我現在所使用的4.3.1版本又可以使用這個方法來進行js路由跳轉了。

我們用home元件來舉個例子

class Home extends Component{
    constructor(){
        super()
    }
    toPath=(home)=>{
        console.log(123)
        this.props.history.push({  //我們把要傳參的東西都放在push物件內了
            pathname:home,   //我們要到達哪個路由
            search:"?a=1",   //明文傳參的模式
            query:{'type':'type'}, //query物件傳參
            state:{          //state物件傳參
                b:456
            }
        })
    // this.props.history.push('/123')
    }
    render(){
        return(
            <div>
            <h1 onClick={()=>{this.toPath(`${this.props.match.url}/children1/123`)}}>我是Home</h1>
            <li><Link to={`${this.props.match.url}/children1`}>children1</Link></li>
            <li><Link to={`${this.props.match.url}/children2`}>children2</Link></li>
            <Route path={`${this.props.match.url}/children1/:id`} component={Children} />
            <Route path={`${this.props.match.url}/children2`} component={ChildrenTwo} />     
            </div>
        )
    }
}

/*相應的 我們在Children 元件裡面有對應的方法來獲取引數。*/

class Children extends Component{
    constructor(){
        super()
        this.state={
           
        }
    }
    render(){
        console.log(this.props.match.params.id)  //這種是通過路徑上面的:id傳過來的引數
        console.log(this.props.location.query)  //這是通過push的引數物件中的query傳過來的 和vue的query有區別 它不在位址列 重新整理丟失
        console.log(this.props.location.state)  //這是通過push的引數物件中的state傳過來的 它不在位址列 重新整理丟失
        console.log(this.props.location.search)  //暴露在位址列，需要自行處理獲取資料


        return(
            <div>
                <h1>我是子元件1 </h1>
            </div>
        )
    }
}
複製程式碼

總結

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

視訊製作中

相關文章