React Router教程
React項目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的赖阻。它也分為：
- react-router 核心組件
- react-router-dom 應(yīng)用于瀏覽器端的路由庫（單獨使用包含了react-router的核心部分）
- react-router-native 應(yīng)用于native端的路由
以下教程我們都以Web端為主蝶押，所以所有的教程內(nèi)容都是默認關(guān)于react-router-dom的介紹。
進行網(wǎng)站（將會運行在瀏覽器環(huán)境中）構(gòu)建火欧，我們應(yīng)當(dāng)安裝react-router-dom棋电。react-router-dom暴露出react-router中暴露的對象與方法茎截，因此你只需要安裝并引用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ī)則對應(yīng)的組件烘浦。
Link路由跳轉(zhuǎn)的組件
當(dāng)然每個組件下又會有幾種不同的子類組件實現(xiàn)抖坪。比如： Router組件就針對不同功能和平臺對應(yīng)用：<BrowserRouter>瀏覽器的路由組件<HashRouter>URL格式為Hash路由組件<MemoryRouter>內(nèi)存路由組件<NativeRouter>Native的路由組件-
<StaticRouter>地址不改變的靜態(tài)路由組件
三大組件使用的關(guān)系：image如果說我們的應(yīng)用程序是一座小城的話，那么Route就是一座座帶有門牌號的建筑物闷叉，而Link就代表了到某個建筑物的路線擦俐。有了路線和目的地，那么就缺一位老司機了握侧，沒錯Router就是這個老司機蚯瞧。
第一個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)我們點擊了程序中的一個鏈接之后,BrowserRouter就會找出與這個URL匹配的Route饥悴，并將他們對應(yīng)的組件渲染出來。 BrowserRouter是用來管理我們的組件的盲再，那么它當(dāng)然要被放在最頂級的位置西设，而我們的應(yīng)用程序的組件就作為它的一個子組件而存在。
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組件提供了四個屬性答朋。
-
basename: 字符串類型贷揽，路由器的默認根路徑 -
forceRefresh: 布爾類型，在導(dǎo)航的過程中整個頁面是否刷新 -
getUserConfirmation: 函數(shù)類型梦碗，當(dāng)導(dǎo)航需要確認時執(zhí)行的函數(shù)禽绪。默認是：window.confirm -
keyLength: 數(shù)字類型location.key的長度。默認是 6
basename 屬性
當(dāng)前位置的基準(zhǔn) URL洪规。如果你的頁面部署在服務(wù)器的二級（子）目錄印屁，你需要將 basename 設(shè)置到此子目錄。正確的 URL 格式是前面有一個前導(dǎo)斜杠斩例，但不能有尾部斜杠雄人。
例如：有時候我們的應(yīng)用只是整個系統(tǒng)中的一個模塊，應(yīng)用中的URL總是以 http://localhost/admin/ 開頭念赶。這種情況下我們總不能每次定義Link和Route的時候都帶上admin吧础钠？react-router已經(jīng)考慮到了這種情況恰力，所以為我們提供了一個basename屬性。為BrowserRouter設(shè)置了basename之后旗吁，Link中就可以省略掉admin了踩萎，而最后渲染出來的URL又會自動帶上admin。
<BrowserRouter basename="/admin"/>
...
<Link to="/home"/> // 被渲染為 <a href="/admin/home">
...
</BrowserRouter>
getUserConfirmation: func
當(dāng)導(dǎo)航需要確認時執(zhí)行的函數(shù)很钓。默認使用 window.confirm驻民。
// 使用默認的確認函數(shù)
const getConfirmation = (message, callback) => {
const allowTransition = window.confirm(message)
callback(allowTransition)
}
<BrowserRouter getUserConfirmation={getConfirmation}/>
forceRefresh: bool
當(dāng)設(shè)置為 true 時，在導(dǎo)航的過程中整個頁面將會刷新履怯。 只有當(dāng)瀏覽器不支持 HTML5 的 history API 時，才設(shè)置為 true裆泳。
const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>
keyLength: number
location.key 的長度叹洲。默認是 6。
<BrowserRouter keyLength={12}/>
children: node
渲染單一子組件（元素）工禾。
HashRouter
HashRouter 使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL 的同步运提。
注意： 使用 hash 的方式記錄導(dǎo)航歷史不支持
location.key和location.state。在以前的版本中闻葵，我們?yōu)檫@種行為提供了 shim民泵，但是仍有一些問題我們無法解。任何依賴此行為的代碼或插件都將無法正常使用槽畔。由于該技術(shù)僅用于支持傳統(tǒng)的瀏覽器栈妆，因此在用于瀏覽器時可以使用<BrowserHistory>代替。
跟BrowserRouter類似厢钧，它也有：basename鳞尔、getUserConfirmation、children屬性早直，而且是一樣的寥假。
hashType: string
window.location.hash 使用的 hash 類型。有如下幾種：
-
"slash"- 后面跟一個斜杠霞扬，例如#/和#/sunshine/lollipops -
"noslash"- 后面沒有斜杠糕韧，例如#和#sunshine/lollipops -
"hashbang"- Google 風(fēng)格的 "ajax crawlable"，例如#!/和#!/sunshine/lollipops
默認為 "slash"喻圃。
MemoryRouter
主要用在ReactNative這種非瀏覽器的環(huán)境中萤彩，因此直接將URL的history保存在了內(nèi)存中。 StaticRouter 主要用于服務(wù)端渲染斧拍。
Link組件
Link就像是一個個的路牌乒疏，為我們指明組件的位置。Link使用聲明式的方式為應(yīng)用程序提供導(dǎo)航功能饮焦，定義的Link最終會被渲染成一個a標(biāo)簽怕吴。Link使用to這個屬性來指明目標(biāo)組件的路徑窍侧，可以直接使用一個字符串，也可以傳入一個對象转绷。
import { Link } from 'react-router-dom'
// 字符串參數(shù)
<Link to="/query">查詢</Link>
// 對象參數(shù)
<Link to={{
pathname: '/query',
search: '?key=name',
hash: '#hash',
state: { fromDashboard: true }
}}>查詢</Link>
屬性： to
需要跳轉(zhuǎn)到的路徑(pathname)或地址（location）伟件。
屬性：replace: bool
當(dāng)設(shè)置為 true 時，點擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址议经。
當(dāng)設(shè)置為 false 時斧账，點擊鏈接后將在原有訪問歷史記錄的基礎(chǔ)上添加一個新的紀(jì)錄。
默認為 false煞肾。
<Link to="/courses" replace />
NavLink組件
NavLink是一個特殊版本的Link咧织，可以使用activeClassName來設(shè)置Link被選中時被附加的class，使用activeStyle來配置被選中時應(yīng)用的樣式籍救。此外习绢，還有一個exact屬性,此屬性要求location完全匹配才會附加class和style。這里說的匹配是指地址欄中的URl和這個Link的to指定的location相匹配蝙昙。
// 選中后被添加class selected
<NavLink to={'/'} exact activeClassName='selected'>Home</NavLink>
// 選中后被附加樣式 color:red
<NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>
activeClassName默認值為active
屬性
- to 可以是字符串或者對象闪萄，同Link組件
- exact 布爾類型，完全匹配時才會被附件class和style
- activeStyle Object類型
- activeClassName 字符串類型
- strict: bool類型奇颠，當(dāng)值為
true時败去，在確定位置是否與當(dāng)前 URL 匹配時，將考慮位置pathname后的斜線烈拒。
Route組件
Route應(yīng)該是react-route中最重要的組件了圆裕，它的作用是當(dāng)location與Route的path匹配時渲染Route中的Component。如果有多個Route匹配荆几，那么這些Route的Component都會被渲染葫辐。
與Link類似，Route也有一個exact屬性伴郁，作用也是要求location與Route的path絕對匹配耿战。
// 當(dāng)location形如 http://location/時，Home就會被渲染焊傅。
// 因為 "/" 會匹配所有的URL剂陡，所以這里設(shè)置一個exact來強制絕對匹配。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
Route的三種渲染方式
- component: 這是最常用也最容易理解的方式狐胎，給什么就渲染什么鸭栖。
- render: render的類型是function，Route會渲染這個function的返回值握巢。因此它的作用就是附加一些額外的邏輯晕鹊。
<Route path="/home" render={() => {
console.log('額外的邏輯');
return (<div>Home</div>);
}/>
- children: 這是最特殊的渲染方式。
一、它同render類似,是一個function溅话。不同的地方在于它會被傳入一個match參數(shù)來告訴你這個Route的path和location匹配上沒有晓锻。
二、第二個特殊的地方在于飞几，即使path沒有匹配上砚哆，我們也可以將它渲染出來。秘訣就在于前面一點提到的match參數(shù)屑墨。我們可以根據(jù)這個參數(shù)來決定在匹配的時候渲染什么躁锁，不匹配的時候又渲染什么。
// 在匹配時卵史，容器的calss是light战转，<Home />會被渲染
// 在不匹配時，容器的calss是dark以躯，<About />會被渲染
<Route path='/home' children={({ match }) => (
<div className={match ? 'light' : 'dark'}>
{match ? <Home/>:<About>}
</div>
)}/>
所有路由中指定的組件將被傳入以下三個 props 槐秧。
- match.
- location.
- history.
這里主要說下match.params.透過這個屬性，我們可以拿到從location中解析出來的參數(shù)寸潦。當(dāng)然，如果想要接收參數(shù)社痛，我們的Route的path也要使用特殊的寫法见转。
如下示例，三個Link是一個文章列表中三個鏈接蒜哀，分別指向三篇id不同的文章斩箫。而Route用于渲染文章詳情頁。注意path='/p/:id' 撵儿，location中的對應(yīng)的段會被解析為id=1 這樣的鍵值乘客。最終這個鍵值會作為param的鍵值存在。Route中的組件可以使用this.props.match.params.id來獲取淀歇，示例中使用了結(jié)構(gòu)賦值易核。
<Link to='/p/1' />
<Link to='/p/2' />
<Link to='/p/3' />
......
<Route path='/p/:id' render={(match)=<h3>當(dāng)前文章ID:{match.params.id}</h3>)} />
location
Location 是指你當(dāng)前的位置，下一步打算去的位置浪默，或是你之前所在的位置牡直，形式大概就像這樣：
{
key: 'ac3df4', // 在使用 hashHistory 時，沒有 key
pathname: '/somewhere'
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}
你使用以下幾種方式來獲取 location 對象：
- 在 Route component 中纳决，以
this.props.location的方式獲取碰逸， - 在 Route render 中，以
({ location }) => ()的方式獲取阔加， - 在 Route children 中饵史，以
({ location }) => ()的方式獲取， - 在 withRouter 中，以
this.props.location的方式獲取胳喷。
你也可以在 history.location 中獲取 location 對象湃番，但是別那么寫，因為 history 是可變的厌蔽。更多信息請參見 history 文檔牵辣。
location 對象不會發(fā)生改變，因此你可以在生命周期的鉤子函數(shù)中使用 location 對象來查看當(dāng)前頁面的位置是否發(fā)生改變奴饮，這種技巧在獲取遠程數(shù)據(jù)以及使用動畫時非常有用纬向。
componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
// 已經(jīng)跳轉(zhuǎn)了！
}
}
通常情況下戴卜，你只需要給一個字符串當(dāng)做 location 逾条，但是，當(dāng)你需要添加一些 location 的狀態(tài)時投剥，你可以對象的形式使用 location 师脂。并且當(dāng)你需要多個 UI ，而這些 UI 取決于歷史時江锨，例如彈出框（modal）吃警，使用location 對象會有很大幫助。
// 通常你只需要這樣使用 location
<Link to="/somewhere"/>
// 但是你同樣可以這么用
const location = {
pathname: '/somewhere'
state: { fromDashboard: true }
}
<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)
最后啄育，你可以把 location 傳入一下組件：
- [Route]
- [Switch]
這樣做可以讓組件不使用路由狀態(tài)（router state）中的真實 location酌心，因為我們有時候需要組件去渲染一個其他的 location 而不是本身所處的真實 location，比如使用動畫或是等待跳轉(zhuǎn)時挑豌。
history
本文檔中的「history」以及「history對象」請參照 history 包中的內(nèi)容安券。 History 是 React Router 的兩大重要依賴之一（除去 React 本身），在不同的 Javascript 環(huán)境中氓英，history 以多種形式實現(xiàn)了對于 session 歷史的管理侯勉。
我們會經(jīng)常使用以下術(shù)語：
- 「browser history」 - history 在 DOM 上的實現(xiàn)，經(jīng)常使用于支持 HTML5 history API 的瀏覽器端铝阐。
- 「hash history」 - history 在 DOM 上的實現(xiàn)址貌，經(jīng)常使用于舊版本瀏覽器端。
- 「memory history」 - 一種存儲于內(nèi)存的 history 實現(xiàn)徘键，經(jīng)常用于測試或是非 DOM 環(huán)境（例如 React Native）芳誓。
history 對象通常會具有以下屬性和方法：
-
length-（ number 類型）指的是 history 堆棧的數(shù)量。 -
action-（ string 類型）指的是當(dāng)前的動作（action）啊鸭，例如PUSH锹淌，REPLACE以及POP。 -
location-（ object類型）是指當(dāng)前的位置（location）赠制，location 會具有如下屬性：-
pathname-（ string 類型）URL路徑赂摆。 -
search-（ string 類型）URL中的查詢字符串（query string）挟憔。 -
hash-（ string 類型）URL的 hash 分段。 -
state-（ string 類型）是指 location 中的狀態(tài)烟号，例如在push(path, state)時绊谭，state會描述什么時候 location 被放置到堆棧中等信息。這個 state 只會出現(xiàn)在 browser history 和 memory history 的環(huán)境里汪拥。
-
-
push(path, [state])-（ function 類型）在 hisotry 堆棧頂加入一個新的條目达传。 -
replace(path, [state])-（ function 類型）替換在 history 堆棧中的當(dāng)前條目。 -
go(n)-（ function 類型）將 history 對戰(zhàn)中的指針向前移動n迫筑。 -
goBack()-（ function 類型）等同于go(-1)宪赶。 -
goForward()-（ function 類型）等同于go(1)。 -
block(prompt)-（ function 類型）阻止跳轉(zhuǎn)脯燃，（請參照 history 文檔）
match
match 對象包含了 <Route path> 如何與URL匹配的信息搂妻。match 對象包含以下屬性：
-
params-（ object 類型）即路徑參數(shù)，通過解析URL中動態(tài)的部分獲得的鍵值對辕棚。 -
isExact- 當(dāng)為true時欲主，整個URL都需要匹配。 -
path-（ string 類型）用來做匹配的路徑格式逝嚎。在需要嵌套<Route>的時候用到扁瓢。 -
url-（ string 類型）URL匹配的部分，在需要嵌套<Link>的時候會用到补君。
你可以在以下地方獲取 match 對象：
- 在 Route component 中引几，以
this.props.match方式。 - 在 Route render中赚哗，以
({ match }) => ()方式她紫。 - 在 Route children中硅堆，以
({ match }) => ()方式
Redirect組件
當(dāng)這個組件被渲染是屿储，location會被重寫為Redirect的to指定的新location。它的一個用途是登錄重定向渐逃，比如在用戶點了登錄并驗證通過之后够掠，將頁面跳轉(zhuǎn)到個人主頁。
<Redirect to="/new"/>
Switch組件
渲染匹配地址(location)的第一個 <Route>或者<Redirect>
這與只使用一堆<Route>有什么不同茄菊？
<Switch>的獨特之處是獨它僅僅渲染一個路由疯潭。相反地，每一個包含匹配地址(location)的<Route>都會被渲染面殖。思考下面的代碼：
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
如果現(xiàn)在的URL是 /about 竖哩，那么 <About>, <User>, 還有 <NoMatch> 都會被渲染，因為它們都與路徑(path)匹配脊僚。這種設(shè)計相叁，允許我們以多種方式將多個 <Route> 組合到我們的應(yīng)用程序中，例如側(cè)欄(sidebars)，面包屑(breadcrumbs)增淹，bootstrap tabs等等椿访。 然而，偶爾我們只想選擇一個<Route> 來渲染虑润。如果我們現(xiàn)在處于 /about成玫，我們也不希望匹配 /:user （或者顯示我們的 "404" 頁面 ）。以下是使用 Switch 的方法來實現(xiàn)：
import { Switch, Route } from 'react-router'
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
現(xiàn)在拳喻，如果我們處于 /about, <Switch> 將開始尋找匹配的 <Route>哭当。 <Route path="/about"/> 將被匹配陌粹， <Switch> 將停止尋找匹配并渲染<About>菠赚。 同樣，如果我們處于 /michael 闸餐， <User> 將被渲染渗柿。
這對于過渡動畫也是起作用的个盆，因為匹配的 <Route> 在與前一個相同的位置被渲染。
<Fade>
<Switch>
{/* there will only ever be one child here */}
{/* 這里只會有一個子節(jié)點 */}
<Route/>
<Route/>
</Switch>
</Fade>
<Fade>
<Route/>
<Route/>
{/* there will always be two children here,
one might render null though, making transitions
a bit more cumbersome to work out */}
{/* 這里總是有兩個子節(jié)點,
一個可能會渲染為null, 使計算過渡增加了一點麻煩 */}
</Fade>
路由配置
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.
////////////////////////////////////////////////////////////
// first our route components
const Main = () => <h2>Main</h2>;
const Sandwiches = () => <h2>Sandwiches</h2>;
const Tacos = ({ routes }) => (
<div>
<h2>Tacos</h2>
<ul>
<li>
<Link to="/tacos/bus">Bus</Link>
</li>
<li>
<Link to="/tacos/cart">Cart</Link>
</li>
</ul>
{routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
</div>
);
const Bus = () => <h3>Bus</h3>;
const Cart = () => <h3>Cart</h3>;
////////////////////////////////////////////////////////////
// then our route config
const routes = [
{
path: "/sandwiches",
component: Sandwiches
},
{
path: "/tacos",
component: Tacos,
routes: [
{
path: "/tacos/bus",
component: Bus
},
{
path: "/tacos/cart",
component: Cart
}
]
}
];
// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = route => (
<Route
path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>
);
const RouteConfigExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/tacos">Tacos</Link>
</li>
<li>
<Link to="/sandwiches">Sandwiches</Link>
</li>
</ul>
{routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
</div>
</Router>
);
export default RouteConfigExample;
