React路由的使用步驟和執(zhí)行過(guò)程

現(xiàn)代的前端應(yīng)用大多都是 SPA（單頁(yè)應(yīng)用程序），也就是只有一個(gè) HTML 頁(yè)面的應(yīng)用程序。因?yàn)樗挠脩趔w驗(yàn)更好、對(duì)服務(wù)器的壓力更小，所以更受歡迎。為了有效的使用單個(gè)頁(yè)面來(lái)管理原來(lái)多頁(yè)面的功能，前端路由應(yīng)運(yùn)而生。

 前端路由的功能可以讓用戶從一個(gè)視圖（頁(yè)面）導(dǎo)航到另一個(gè)視圖（頁(yè)面），前端路由是一套映射規(guī)則，在React中是 URL路徑 與 組件 的對(duì)應(yīng)關(guān)系使用React路由簡(jiǎn)單來(lái)說(shuō)，就是配置路徑和組件（配對(duì)）。

路由的基本使用

1. 安裝：yarn add react-router-dom

2. 導(dǎo)入路由的三個(gè)核心組件：Router / Route / Link

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

<Router> 
  <div className="App"> 
   // … 省略頁(yè)面內(nèi)容 
 </div> 
</Router>

<Link to="/first">頁(yè)面一</Link>

5. 使用 Route 組件配置路由規(guī)則和要展示的組件（路由出口）

const First = () => <p>頁(yè)面一的頁(yè)面內(nèi)容</p>
<Router>
     <div className="App">
         <Link to="/first">頁(yè)面一</Link>
         <Route path="/first" component={First}></Route>
      </div>
</Router>

Router 組件：包裹整個(gè)應(yīng)用，一個(gè) React 應(yīng)用只需要使用一次

兩種常用 Router：HashRouter 和 BrowserRouter

HashRouter：使用 URL 的哈希值實(shí)現(xiàn)（localhost:3000/#/first）

（推薦）BrowserRouter：使用 H5 的 history API 實(shí)現(xiàn)（localhost:3000/first）

// to屬性：瀏覽器地址欄中的pathname（location.pathname）
<Link to="/first">頁(yè)面一</Link>

Route 組件：指定路由展示組件相關(guān)信息

// path屬性：路由規(guī)則 
// component屬性：展示的組件 
// Route組件寫(xiě)在哪，渲染出來(lái)的組件就展示在哪 
<Route path="/first" component={First}></Route>

1. 點(diǎn)擊 Link 組件（a標(biāo)簽），修改了瀏覽器地址欄中的 url 。

2. React 路由監(jiān)聽(tīng)到地址欄 url 的變化。

3. React 路由內(nèi)部遍歷所有 Route 組件，使用路由規(guī)則（ path ）與 pathname 進(jìn)行匹配。

4. 當(dāng)路由規(guī)則（path）能夠匹配地址欄中的 pathname 時(shí)，就展示該 Route 組件的內(nèi)容。