一、SPA的理解
- 單頁Web應用（single page web application，SPA）。
- 整個應用只有一個完整的頁面。
- 點擊頁面中的鏈接不會刷新頁面，只會做頁面的局部更新。
- 數據都需要通過ajax請求獲取, 並在前端異步展現。
二、路由的理解
- 什麼是路由?
- 一個路由就是一個映射關係(key:value)
- key爲路徑, value可能是function或component
- 路由分類
- 後端路由：
1) 理解： value是function, 用來處理客戶端提交的請求。
2) 註冊路由： router.get(path, function(req, res))
3) 工作過程：當node接收到一個請求時, 根據請求路徑找到匹配的路由, 調用路由中的函數來處理請求, 返回響應數據
2. 前端路由：
1) 瀏覽器端路由，value是component，用於展示頁面內容。
2) 註冊路由: <Route path="/test" component={Test}>
3) 工作過程：當瀏覽器的path變爲/test時, 當前路由組件就會變爲Test組件
二、react-router-dom的理解
- react的一個插件庫。
- 專門用來實現一個SPA應用。
- 基於react的項目基本都會用到此庫。
三、react-router-dom相關API
1. 內置組件
- <BrowserRouter>
- <HashRouter>
- <Route>
- <Redirect>
- <Link>
- <NavLink>
- <Switch>
- history對象
- match對象
- withRouter函數
2. 其它
- history對象
- match對象
- withRouter函數
3.路由的基本使用
1.明確好界面中的導航區、展示區
2.導航區的a標籤改爲Link標籤
<Link to="/xxxxx">Demo</Link>
3.展示區寫Route標籤進行路徑的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外側包裹了一個<BrowserRouter>或<HashRouter>
四、路由組件與一般組件
1.寫法不同：
一般組件：<Demo/>
路由組件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
一般組件：components
路由組件：pages
3.接收到的props不同：
一般組件：寫組件標籤時傳遞了什麼，就能收到什麼
路由組件：接收到三個固定的屬性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
五、代碼
1.App.jsx
1 import React, { Component } from 'react' 2 import {Link,Route} from 'react-router-dom' 3 import Home from './components/Home' 4 import About from './components/About' 5 6 export default class App extends Component { 7 render() { 8 return ( 9 <div> 10 <div className="row"> 11 <div className="col-xs-offset-2 col-xs-8"> 12 <div className="page-header"><h2>React Router Demo</h2></div> 13 </div> 14 </div> 15 <div className="row"> 16 <div className="col-xs-2 col-xs-offset-2"> 17 <div className="list-group"> 18 19 {/* 原生html中，靠<a>跳轉不同的頁面 */} 20 {/* <a className="list-group-item" href="./about.html">About</a> 21 <a className="list-group-item active" href="./home.html">Home</a> */} 22 23 {/* 在React中靠路由鏈接實現切換組件--編寫路由鏈接 */} 24 <Link className="list-group-item" to="/about">About</Link> 25 <Link className="list-group-item" to="/home">Home</Link> 26 </div> 27 </div> 28 <div className="col-xs-6"> 29 <div className="panel"> 30 <div className="panel-body"> 31 {/* 註冊路由 */} 32 <Route path="/about" component={About}/> 33 <Route path="/home" component={Home}/> 34 </div> 35 </div> 36 </div> 37 </div> 38 </div> 39 ) 40 } 41 }
2.index.js
1 //引入react核心庫 2 import React from 'react' 3 //引入ReactDOM 4 import ReactDOM from 'react-dom' 5 // 6 import {BrowserRouter} from 'react-router-dom' 7 //引入App 8 import App from './App' 9 10 ReactDOM.render( 11 <BrowserRouter> 12 <App/> 13 </BrowserRouter>, 14 document.getElementById('root') 15 )
3.Home.jsx
1 import React, { Component } from 'react' 2 3 export default class Home extends Component { 4 render() { 5 return ( 6 <h3>我是Home的內容</h3> 7 ) 8 } 9 }
4.About.jsx
1 import React, { Component } from 'react' 2 3 export default class About extends Component { 4 render() { 5 return ( 6 <h3>我是About的內容</h3> 7 ) 8 } 9 }