手挽手帶你學(xué)React之React-router4.x的使用

更新時(shí)間：2019年02月14日 14:33:28 作者：蔣吉兆

這篇文章主要介紹了手挽手帶你學(xué)React之React-router4.x的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

什么是React-router

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

為什么要用React-router

我們開(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 (
      <div>  
        <h1>App</h1>
        <ul>
          <li><a href="#/children1" rel="external nofollow" >children1</a></li> 
          {/* 點(diǎn)擊更改哈希值 這里觸發(fā)我們的監(jiān)聽(tīng) 然后修改state來(lái)觸發(fā)組件的重新傳染 */}
          <li><a href="#/children2" rel="external nofollow" >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>
    )
  }
}

這樣我們通過(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ě)的好多了！

React-router 初體驗(yàn)

首先我們?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需要后端配合 單獨(dú)前端設(shè)置 刷新會(huì)出現(xiàn)404
// 然后我們把App組件整理干凈，大概成這個(gè)樣子
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的初步體驗(yàn),怎么樣~我給大家的第一次的感覺(jué)還可以吧~

基本組件

Routers

在React-router4.0中，Routers有兩個(gè)表現(xiàn)方式 <BrowserRouter> 和 <HashRouter> 這兩個(gè)標(biāo)簽都將會(huì)給你創(chuàng)建一個(gè)專門的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ě)法如下

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

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

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ì)展示

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

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

<Route strict path="/one/" component={App} />
// 我們加了 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)看代碼

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

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

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

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

Link和NavLink

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

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

  <Link to={{
    pathname:'/one',
    search:'?name=qm',
    hash:'#two',
    state:{
      myName:'qimiao'
    }
  }} />
  // 這樣我們點(diǎn)擊link不僅可以到one 還可以傳遞一些參數(shù)

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

  <NavLink exact activeClassName='navLink' to='/one/' /> 
  // 這就是路由到one 搭配Router使用 當(dāng)然我們可以使用一個(gè)對(duì)象

  <NavLink exact activeClassName='navLink' to={{
    pathname:'/one',
    search:'?name=qm',
    hash:'#two',
    state:{
      myName:'qimiao'
    }
  }} />
  // 這里的exact 同樣是嚴(yán)格比配模式 同Route
  // 這樣我們可以為當(dāng)前選中的路由設(shè)置樣式了

子路由的書(shū)寫(xiě)

在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 (
      <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以后的版本這樣都會(huì)報(bào)錯(cuò) 那么我們應(yīng)該怎么寫(xiě)呢*/}
        </Route>
      
        </div>
      </Router>
    )
  }
}

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

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> 
          {/* 同樣 這兩個(gè)link讓他們轉(zhuǎn)移到Home中 我們的home組件就變成了下面的樣子 */}
        </ul>
        <Route path="/home" component={Home} >
         {/*<Route path="children1" component={Children} />*/} 
         {/*<Route path="children2" component={ChildrenTwo} />*/} 
          {/*先把這里注釋掉 然后我們來(lái)到Home組件內(nèi)*/}
        </Route>
      
        </div>
      </Router>
    )
  }
}

// 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(
      <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>
    )
  }
}

路由跳轉(zhuǎn)

聲明式跳轉(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(
      <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>
    )
  }
}

/*相應(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(
      <div>
        <h1>我是子組件1 </h1>
      </div>
    )
  }
}

總結(jié)

這一期我們主要還是講了react-router4.x的基礎(chǔ)使用和傳參方法，react-router4.x坑比較多，不過(guò)使用熟練了會(huì)讓你感覺(jué)很爽，大家不要吝嗇自己的時(shí)間多多學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: