react路由使用(二)

上篇文章介紹了路由安裝基本使用,今天繼續來看路由的跳轉。

路由的跳轉有兩種基本方式，一種是通過標籤的形式跳轉，一種是函數式跳轉，這個跟vue是很相似的。

1.通過標籤的形式跳轉：

import {Link,NavLink} from 'react-router-dom'     // 這邊導入進行跳轉的標籤
const Home = () =>{
   return(
     <div>
        <Link to='/about'>點擊進行跳轉</Link>
        <NavLink to='/mine'>點擊進行跳轉</NavLink>
     </div>
   )
}
export default Home

Link和NavLink都可以達到跳轉的作用，其含有的屬性也是一樣的，但是有一點，在使用NavLink標籤的時候我們點擊跳轉會有高亮的效果，這個其實是NavLink會在帶一個類名叫做active並且我們可以通過ActiveClassName對這個類名作自定義設置，以達到我們想要的高亮顏色效果。 兩者的原理其實都是相當於a標籤的跳轉。

2.函數式跳轉：

import React from 'raect'
export default class Home extends React.Component{
   clickHandle = () =>{
      this.props.history.push('/about')   // 通過路由屬性history裏push()方法進行跳轉
      this.props.history.replace('/about') // 依然可以跳轉但和push()方法存在差異
   }  
   render(){
     return(
       <div>
          <button onClick={this.clickHandle}>點擊跳轉</button>
       </div>
     )
   }
}

這種函數式跳轉類似vue中this.$router.push()，在這裏我們看到push()和replace()都可以進行路由跳轉，兩者的區別是 push()方法會記錄歷史，是在跳轉前頁面上的疊加，而replace()方法則會覆蓋掉跳轉前的頁面不會記錄歷史。

注意：在使用函數式跳轉或者叫編程式跳轉方式的時候，當前用作跳轉的組件必須是由路由直接管理的組件，不然我們在props中則無法讀取到路由屬性參數（history location match）更不用說history裏的push()方法了。

那麼，如果真的遇到這種沒有直接被路由管理而且我們也希望使用這種跳轉的時候是不是沒辦法呢？答案是NO ！React跟我們提供了一種方法，就是利用withRouter那麼怎麼做呢，我們來看。

withRouter 的使用：

import React,{withRouter} from 'raect'  // 引入進來
class Home extends React.Component{
   clickHandle = () =>{
      this.props.history.push('/about')   
      this.props.history.replace('/about') 
   }  
   render(){
     return(
       <div>
          <button onClick={this.clickHandle}>點擊跳轉</button>
       </div>
     )
   }
}
export default withRouter(Home)  // 高階組件的方式 導出當前組件

從上面我們不難看到，withRouter是React自帶的，我們直接引入即可使用，因爲withRouter是一個高階組件，所以我們要採取如上的方式導出當前組件。

可以說就變動了兩行代碼，就可以使我們沒有被路由直接管理的組件同樣在props中讀取到路由屬性及參數，從而正常使用函數式路由跳轉，很方便有木有~~

那路由的跳轉，就說到這~~