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

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

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

路由的基本使用

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

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

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

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

<Link to="/first">頁面一</Link>

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

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

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

兩種常用 Router：HashRouter 和 BrowserRouter

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

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

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

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

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

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

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

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

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