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

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

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

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

什么是React-router

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

為什么要用React-router

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

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

  // 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() {
    //在這里我們定義一個(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)聽 然后修改state來觸發(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>
    )
  }
}

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

React-router 初體驗(yàn)

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

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

要想體驗(yàn)一個(gè)新的東西，當(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需要后端配合 單獨(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),怎么樣~我給大家的第一次的感覺還可以吧~

基本組件

Routers

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

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

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

Route

注意，最外層的是Router 這里是 Route 這是我們的路由匹配組件，它有兩個(gè) Route和Switch

Route 組件擁有多個(gè)屬性，這在我們后期的路由傳參中將會(huì)用到。這里我們需要簡單了解幾個(gè)屬性 path component exact strict

path 是我們匹配的地址，當(dāng)?shù)刂菲ヅ涞臅r(shí)候我們才會(huì)去渲染 component內(nèi)的組件內(nèi)容

path 后面如果書寫模式帶了 /: 這樣的內(nèi)容，那么這里將會(huì)成為占位符我們可以利用占位符來取到對應(yīng)路徑的參數(shù) 使用 this.props.match.params+占位符的名字即可拿到

exact 屬性來規(guī)定我們是否嚴(yán)格匹配

strict 則是嚴(yán)格匹配模式我們規(guī)定的路徑使用/one/來書寫如果沒有完全匹配 /one/ 則不會(huì)展示

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

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

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

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

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

在這樣的路由下我們匹配/about 會(huì)發(fā)現(xiàn) 所有的路由都可以匹配到并且渲染了出來，這肯定不是我們想要的結(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，來控制url。我們代碼里看看書寫方法

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

  <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è)對象

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

子路由的書寫

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

先來一個(gè)之前的寫法，當(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)該怎么寫呢*/}
        </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} />*/} 
          {/*先把這里注釋掉 然后我們來到Home組件內(nèi)*/}
        </Route>
      
        </div>
      </Router>
    )
  }
}

// home內(nèi)部用{this.props.match.url+子路由路徑}來獲取當(dāng)前的路徑并且加上我們要路由到的位置來進(jìn)行路由匹配和路徑跳轉(zhuǎn)匹配 這樣書寫 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)說過了 Link和NavLink 兩個(gè)標(biāo)簽就可以滿足了我們主要說一下js跳轉(zhuǎn)

在4.0剛剛發(fā)布的時(shí)候 this.props.history.push('路徑')這個(gè)方法已經(jīng)行不通了，不過值得慶幸的是，我現(xiàn)在所使用的4.3.1版本又可以使用這個(gè)方法來進(jìn)行js路由跳轉(zhuǎn)了。

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

class Home extends Component{
  constructor(){
    super()
  }
  toPath=(home)=>{
    console.log(123)
    this.props.history.push({ //我們把要傳參的東西都放在push對象內(nèi)了
      pathname:home,  //我們要到達(dá)哪個(gè)路由
      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>
    )
  }
}

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

總結(jié)

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

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

您可能感興趣的文章: