小白程度學習react的路由
今天來說說React的路由React-Router抢肛。它是官方維護的疟羹，事實上也是唯一可選的路由庫。它通過管理URL围橡，實現(xiàn)組件的切換和狀態(tài)的變化暖混，是React非常重要的組件。
劍有雙刃翁授，事物都有優(yōu)缺點拣播，強大的React路由也不例外。
1收擦、優(yōu)點：
(1).良好的交互體驗
用戶不需要重新刷新頁面贮配，獲取數(shù)據(jù)也是通過Ajax異步獲取，頁面顯示流暢塞赂。
2).良好的前后端工作分離模式
單頁Web應用可以和RESTful規(guī)約一起使用泪勒，通過REST API提供接口數(shù)據(jù)，并使用Ajax異步獲取宴猾，這樣有助于分離客戶端和服務器端工作圆存。更進一步，可以在客戶端也可以分解為靜態(tài)頁面和頁面交互兩個部分仇哆。
3).減輕服務器壓力
服務器只用出數(shù)據(jù)就可以沦辙，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍讹剔；
4).共用一套后端程序代碼
不用修改后端程序代碼就可以同時用于Web界面油讯、手機、平板等多種客戶端延欠；
2陌兑、缺點：
1).SEO難度較高
由于所有的內容都在一個頁面中動態(tài)替換顯示，所以在SEO上其有著天然的弱勢衫冻，所以如果你的站點對SEO很看重诀紊，且要用單頁應用，那么就做些靜態(tài)頁面給搜索引擎用吧隅俘。
2).前進邻奠、后退管理
由于單頁Web應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能为居，所有的頁面切換需要自己建立堆棧管理碌宴，當然此問題也有解決方案，比如利用URI中的散列+iframe實現(xiàn)蒙畴。
3).初次加載耗時多
為實現(xiàn)單頁Web應用功能及顯示效果贰镣，需要在加載頁面的時候將JavaScript呜象、CSS統(tǒng)一加載，部分頁面可以在需要的時候加載碑隆。所以必須對JavaScript及CSS代碼進行合并壓縮處理恭陡，如果使用第三方庫，建議使用一些大公司的CDN上煤，因此帶寬的消耗是必然的休玩。
網(wǎng)址送上： https://reacttraining.com/react-router/
然后來說說路由安裝步驟吧。
1.npm i react-router-dom -S
2.import { BrowserRouter as Router} from 'react-router-dom'
3.ReactDOM.render(
<Router>
<App /> 在根節(jié)點下使用
</Router>
,
document.getElementById('root')
)
4.
<Route path="/" component={Index}/>
<Route path="/about" component={About}/>
<Link to="/">說明</Link>
5.
exact:
path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes
strict:
path location.pathname matches?
/one/ /one no
/one/ /one/ yes
/one/ /one/two yes
在Route中如果寫了component={組件}劫狠，那么如果要獲取URL信息
可以去組件中的render函數(shù)中的this.props中查找
如果在render下面拴疤，信息只有path匹配才會執(zhí)行這個組件
render={(URL信息)=>{
return 組件
}}
如果在children 下面，不管匹不匹配某個路徑都會執(zhí)行這個組件(甚至可以不用寫path)
children = {(URL信息)=>{
return 組件
}}
如果不匹配独泞，url是沒有match（值為null）
URL:
match
loaction
history
路由匹配：
精確匹配： exact 只找這個路徑,后面的路徑就不認了
/index
/index/aa 后面的就用不了呐矾。
模糊匹配： strict 只認包含這個路徑的，包括后面的
/index/
/index/aa
/index 沒有后面的/就用不了懦砂。
如果要超精確匹配蜒犯，那么要加 exact strict 。
先寫到這里吧荞膘，不懂的建議看官網(wǎng)文檔愧薛，感謝觀看，回見衫画。
