相關理解

1.1. SPA 的理解

1. 單頁 Web 應用（single page web application，SPA）。

2. 整個應用只有一個完整的頁面。

3. 點選頁面中的連結不會重新整理頁面，只會做頁面的區域性更新。

4. 資料都需要通過 ajax 請求獲取, 並在前端非同步展現。

1.2. 路由的理解

1. 什麼是路由?

• 一個路由就是一個對映關係(key:value)

• key 為路徑, value 可能是 function 或 component

2. 路由分類

後端路由：

1) 理解： value 是 function, 用來處理客戶端提交的請求。

2) 註冊路由： router.get(path, function(req, res))

3) 工作過程：當 node 接收到一個請求時, 根據請求路徑找到匹配的路由,前端培訓呼叫路由中的函式來處理請求, 返回響應資料

前端路由：

1) 瀏覽器端路由，value 是 component，用於展示頁面內容。

2) 註冊路由: <Route path="/test" component={Test}>

3) 工作過程：當瀏覽器的 path 變為/test 時, 當前路由元件就會變為 Test 元件

1.3. react-router-dom 的理解

• react 的一個外掛庫。

• 專門用來實現一個 SPA 應用。

• 基於 react 的專案基本都會用到此庫。

2. react-router-dom 相關 API

2.1. 內建元件

<BrowserRouter>

<HashRouter>

<Route>

<Redirect>

<Link>

<NavLink>

<Switch>

2.2. 其它

• history 物件

• match 物件

• withRouter 函式