React Router教程

React項(xiàng)目的可用的路由庫(kù)是React-Router,當(dāng)然這也是官方支持的筝家。它也分為：

• react-router 核心組件
• react-router-dom 應(yīng)用于瀏覽器端的路由庫(kù)（單獨(dú)使用包含了react-router的核心部分）
• react-router-native 應(yīng)用于native端的路由

以下教程我們都以Web端為主哥童，所以所有的教程內(nèi)容都是默認(rèn)關(guān)于 react-router-dom的介紹历筝。
<meta charset="utf-8">

進(jìn)行網(wǎng)站（將會(huì)運(yùn)行在瀏覽器環(huán)境中）構(gòu)建，我們應(yīng)當(dāng)安裝react-router-dom袍睡。react-router-dom暴露出react-router中暴露的對(duì)象與方法闹蒜，因此你只需要安裝并引用react-router-dom即可。
官方文檔地址： https://reacttraining.com/react-router/web/guides/philosophy

Installation | 安裝

安裝：

yarn add react-router-dom
# 或者在塔，不使用 yarn
npm install react-router-dom

路由的基本概念

現(xiàn)在的React Router版本中已不需要路由配置，現(xiàn)在一切皆組件拨黔。

ReactRouter中提供了以下三大組件：

• Router是所有路由組件共用的底層接口組件蛔溃，它是路由規(guī)則制定的最外層的容器。
• Route路由規(guī)則匹配篱蝇，并顯示當(dāng)前的規(guī)則對(duì)應(yīng)的組件城榛。
• Link路由跳轉(zhuǎn)的組件
  當(dāng)然每個(gè)組件下又會(huì)有幾種不同的子類組件實(shí)現(xiàn)。比如： Router組件就針對(duì)不同功能和平臺(tái)對(duì)應(yīng)用：
  <BrowserRouter> 瀏覽器的路由組件
  <HashRouter> URL格式為Hash路由組件
  <MemoryRouter> 內(nèi)存路由組件
  <NativeRouter> Native的路由組件
  <StaticRouter>地址不改變的靜態(tài)路由組件
  三大組件使用的關(guān)系：
  image.png
  
  如果說我們的應(yīng)用程序是一座小城的話态兴，那么Route就是一座座帶有門牌號(hào)的建筑物，而Link就代表了到某個(gè)建筑物的路線疟位。有了路線和目的地瞻润，那么就缺一位老司機(jī)了，沒錯(cuò)Router就是這個(gè)老司機(jī)甜刻。

第一個(gè)Demo

現(xiàn)在你可以復(fù)制任意的示例代碼绍撞，并粘貼到 src/App.js。如下：

import React, { Component } from 'react';
import { HashRouter as Router, Link, Route } from 'react-router-dom';
import './App.css';

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Product = () => (
  <div>
    <h2>Product</h2>
  </div>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Link to="/">Home</Link>
          <Link to="/About">About</Link>
          <Link to="/Product">Product</Link>
          <hr/>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/product" component={Product}></Route>
        </div>
      </Router>
    );
  }
}

export default App;

Router組件

BrowserRouter組件

BrowserRouter主要使用在瀏覽器中得院，也就是WEB應(yīng)用中傻铣。它利用HTML5 的history API來同步URL和UI的變化。當(dāng)我們點(diǎn)擊了程序中的一個(gè)鏈接之后,BrowserRouter就會(huì)找出與這個(gè)URL匹配的Route祥绞，并將他們對(duì)應(yīng)的組件渲染出來非洲。 BrowserRouter是用來管理我們的組件的，那么它當(dāng)然要被放在最頂級(jí)的位置蜕径，而我們的應(yīng)用程序的組件就作為它的一個(gè)子組件而存在两踏。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.body);

BrowserRouter組件提供了四個(gè)屬性。

• basename: 字符串類型兜喻，路由器的默認(rèn)根路徑
• forceRefresh: 布爾類型梦染，在導(dǎo)航的過程中整個(gè)頁(yè)面是否刷新
• getUserConfirmation: 函數(shù)類型，當(dāng)導(dǎo)航需要確認(rèn)時(shí)執(zhí)行的函數(shù)。默認(rèn)是：window.confirm
• keyLength: 數(shù)字類型location.key的長(zhǎng)度帕识。默認(rèn)是 6

<meta charset="utf-8">

basename 屬性

當(dāng)前位置的基準(zhǔn) URL泛粹。如果你的頁(yè)面部署在服務(wù)器的二級(jí)（子）目錄，你需要將 basename 設(shè)置到此子目錄肮疗。正確的 URL 格式是前面有一個(gè)前導(dǎo)斜杠晶姊，但不能有尾部斜杠。

例如：有時(shí)候我們的應(yīng)用只是整個(gè)系統(tǒng)中的一個(gè)模塊族吻，應(yīng)用中的URL總是以 http://localhost/admin/ 開頭帽借。這種情況下我們總不能每次定義Link和Route的時(shí)候都帶上admin吧？react-router已經(jīng)考慮到了這種情況超歌，所以為我們提供了一個(gè)basename屬性砍艾。為BrowserRouter設(shè)置了basename之后，Link中就可以省略掉admin了巍举，而最后渲染出來的URL又會(huì)自動(dòng)帶上admin脆荷。

<BrowserRouter basename="/admin"/>
    ...
    <Link to="/home"/> // 被渲染為 <a href="/admin/home">
    ...
</BrowserRouter>

getUserConfirmation: func

當(dāng)導(dǎo)航需要確認(rèn)時(shí)執(zhí)行的函數(shù)。默認(rèn)使用 window.confirm懊悯。

// 使用默認(rèn)的確認(rèn)函數(shù)
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>
···
#### [forceRefresh: bool](https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=forcerefresh-bool)

當(dāng)設(shè)置為 `true` 時(shí)蜓谋，在導(dǎo)航的過程中整個(gè)頁(yè)面將會(huì)刷新。 只有當(dāng)瀏覽器不支持 [HTML5 的 history API](http://caniuse.com/#feat=history) 時(shí)炭分，才設(shè)置為 `true`桃焕。

forceRefresh: bool

當(dāng)設(shè)置為 true 時(shí)，在導(dǎo)航的過程中整個(gè)頁(yè)面將會(huì)刷新捧毛。 只有當(dāng)瀏覽器不支持 HTML5 的 history API 時(shí)观堂，才設(shè)置為 true。

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

keyLength: number

location.key 的長(zhǎng)度呀忧。默認(rèn)是 6师痕。

<BrowserRouter keyLength={12}/>

<meta charset="utf-8">

children: node

渲染單一子組件（元素）。

HashRouter

HashRouter 使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL 的同步而账。

注意： 使用 hash 的方式記錄導(dǎo)航歷史不支持 location.key 和location.state胰坟。在以前的版本中，我們?yōu)檫@種行為提供了 shim泞辐，但是仍有一些問題我們無法解笔横。任何依賴此行為的代碼或插件都將無法正常使用。由于該技術(shù)僅用于支持傳統(tǒng)的瀏覽器咐吼，因此在用于瀏覽器時(shí)可以使用 <BrowserHistory> 代替狠裹。

跟BrowserRouter類似，它也有：basename汽烦、getUserConfirmation涛菠、children屬性，而且是一樣的。
<meta charset="utf-8">

hashType: string

window.location.hash 使用的 hash 類型礁叔。有如下幾種：

• "slash" - 后面跟一個(gè)斜杠，例如 #/ 和 #/sunshine/lollipops
• "noslash" - 后面沒有斜杠迄薄，例如 # 和 #sunshine/lollipops
• "hashbang" - Google 風(fēng)格的 "ajax crawlable"琅关，例如 #!/ 和 #!/sunshine/lollipops

默認(rèn)為 "slash"。

MemoryRouter

主要用在ReactNative這種非瀏覽器的環(huán)境中讥蔽，因此直接將URL的history保存在了內(nèi)存中涣易。 StaticRouter 主要用于服務(wù)端渲染。

Link組件

Link就像是一個(gè)個(gè)的路牌冶伞，為我們指明組件的位置新症。Link使用聲明式的方式為應(yīng)用程序提供導(dǎo)航功能，定義的Link最終會(huì)被渲染成一個(gè)a標(biāo)簽响禽。Link使用to這個(gè)屬性來指明目標(biāo)組件的路徑徒爹，可以直接使用一個(gè)字符串，也可以傳入一個(gè)對(duì)象芋类。

import { Link } from 'react-router-dom'
// 字符串參數(shù)
<Link to="/query">查詢</Link>

// 對(duì)象參數(shù)
<Link to={{
  pathname: '/query',
  search: '?key=name',
  hash: '#hash',
  state: { fromDashboard: true }
}}>查詢</Link>

<meta charset="utf-8">

屬性： to

需要跳轉(zhuǎn)到的路徑(pathname)或地址（location）隆嗅。

屬性：replace: bool

當(dāng)設(shè)置為 true 時(shí)，點(diǎn)擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址侯繁。
當(dāng)設(shè)置為 false 時(shí)胖喳，點(diǎn)擊鏈接后將在原有訪問歷史記錄的基礎(chǔ)上添加一個(gè)新的紀(jì)錄。
默認(rèn)為 false贮竟。

<Link to="/courses" replace />

<meta charset="utf-8">

NavLink組件

NavLink是一個(gè)特殊版本的Link禀晓，可以使用activeClassName來設(shè)置Link被選中時(shí)被附加的class，使用activeStyle來配置被選中時(shí)應(yīng)用的樣式坝锰。此外，還有一個(gè)exact屬性,此屬性要求location完全匹配才會(huì)附加class和style重付。這里說的匹配是指地址欄中的URl和這個(gè)Link的to指定的location相匹配顷级。

// 選中后被添加class selected
<NavLink to={'/'} exact activeClassName='selected'>Home</NavLink>
// 選中后被附加樣式 color:red
<NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>

activeClassName默認(rèn)值為active

屬性

• to 可以是字符串或者對(duì)象，同Link組件
• exact 布爾類型确垫，完全匹配時(shí)才會(huì)被附件class和style
• activeStyle Object類型
• activeClassName 字符串類型
• strict: bool類型弓颈，當(dāng)值為 true 時(shí)，在確定位置是否與當(dāng)前 URL 匹配時(shí)删掀，將考慮位置 pathname 后的斜線翔冀。

<meta charset="utf-8">

Route組件

Route應(yīng)該是react-route中最重要的組件了，它的作用是當(dāng)location與Route的path匹配時(shí)渲染Route中的Component披泪。如果有多個(gè)Route匹配纤子，那么這些Route的Component都會(huì)被渲染。

與Link類似，Route也有一個(gè)exact屬性控硼，作用也是要求location與Route的path絕對(duì)匹配泽论。

// 當(dāng)location形如 http://location/時(shí)，Home就會(huì)被渲染卡乾。
// 因?yàn)?"/" 會(huì)匹配所有的URL翼悴，所以這里設(shè)置一個(gè)exact來強(qiáng)制絕對(duì)匹配。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>