一、前端路由和后端路由

1)后端路由

多頁應(yīng)用中，一個(gè)URL對應(yīng)一個(gè)HTML頁面，一個(gè)Web應(yīng)用包含很多HTML頁面，在多頁應(yīng)用中，頁面路由控制由服務(wù)器端負(fù)責(zé)，這種路由方式稱為后端路由。

多頁應(yīng)用中,每次頁面切換都需要向服務(wù)器發(fā)送一次請求，頁面使用到的靜態(tài)資源也需要重新加載，存在一定的浪費(fèi)。而且，頁面的整體刷新對用戶體驗(yàn)也有影響，因?yàn)椴煌撁骈g往往存在共同的部分，例如導(dǎo)航欄、側(cè)邊欄等，頁面整體刷新也會(huì)導(dǎo)致共用部分的刷新。

2)前端路由

在單面應(yīng)用中，URL發(fā)生并不會(huì)向服務(wù)器發(fā)送新的請求，所以“邏輯頁面”的路由只能由前端負(fù)責(zé)，這種路由方式稱為前端路由。

目前，國內(nèi)的搜索引擎大多對單頁應(yīng)用的SEO支持的不好，因此，對于 SEO 非常看重的 Web
應(yīng)用(例如，企業(yè)官方網(wǎng)站，電商網(wǎng)站等)，一般還是會(huì)選擇采用多頁面應(yīng)用。React 也并非只能用于開發(fā)單頁面應(yīng)用。

二、React Router 安裝

這里使用的 React Router 的大版本號是 v4, 這也是目前最新版本。

React Router 包含3個(gè)庫, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能，實(shí)際使用，我們不會(huì)直接安裝 react-router,而是根據(jù)應(yīng)用運(yùn)行的環(huán)境選擇安裝 react-router-dom(在瀏覽器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依賴 react-router,所以在安裝時(shí)， react-router 也會(huì)自動(dòng)安裝。

創(chuàng)建 Web應(yīng)用，使用

npm install react-router-dom

創(chuàng)建 navtive 應(yīng)用，使用

 npm install react-router-native

三、路由器

React Router 通過 Router 和 Route 兩個(gè)組件完成路由功能。Router 可以理解成路由器，一個(gè)應(yīng)用中需要一個(gè) Router 實(shí)例，所有跌幅配置組件 Route 都定義為 Router 的子組件。在 Web應(yīng)用中，我們一般會(huì)使用對 Router 進(jìn)行包裝的 BrowserRouter 或 HashRouter 兩個(gè)組件 BrowserRouter使用 HTML5 的 history API（pushState、replaceState等）實(shí)現(xiàn)應(yīng)用的 UI 和 URL 的同步。HashRouter 使用 URL 的 hash 實(shí)現(xiàn)應(yīng)用的 UI 和 URL 同步。

BrowserRouter 創(chuàng)建的 URL 形式如下：http://example.com/some/path

HashRouter 創(chuàng)建的 URL 形式如下： http://example.com/#/some/path

使用 BrowserRouter 時(shí)，一般還需要對服務(wù)器進(jìn)行配置，讓服務(wù)器能正確地處理所有可能的URL。例如，當(dāng)瀏覽器發(fā)生 http://example.com/some/path 和 http://example.com/some/path2 兩個(gè)請求時(shí)，服務(wù)器需要能返回正確的 HTML 頁面（也就是單頁面應(yīng)用中唯一的 HTML 頁面）

HashRouter 則不存在這個(gè)問題，因?yàn)?hash 部分的內(nèi)容會(huì)被服務(wù)器自動(dòng)忽略，真正有效的信息是 hash 前端的部分，而對于單頁應(yīng)用來說，這部分是固定的。