react系列學(xué)習(xí)（五）-react-router-dom5.X的使用及相關(guān)問(wèn)題詳解

1、reactreact-router-dom5.X的使及相關(guān)問(wèn)題詳解1、例界如下圖：2、代碼：2.1、主頁(yè)：import HashRouter, Route, Switch, Link, Redirect from react-router-dom;router/重定向2.2、嵌套路由Topics.js組件Route,useRouteMatch,useParamsTopics/* The Topics page has its own with more routesthat build on the /topics URL path. You can think of the2nd here

2、as an index page for all topics, orthe page that is shown when no topic is selected */Please select a topic.);export default Topics;Route,useRouteMatch,useParamsexport default Topic;3、exact:bool完全(嚴(yán)格)匹配。嵌套路由時(shí)不要，如上述例 ，如果了exact，則匹配不到/topicc/:topicId。因?yàn)橄葟募?jí)路由開(kāi)始匹配。4、NavLinkLink的升級(jí)版，可設(shè)置鏈接亮。默認(rèn)加“active”類名，如

3、果要改變類名，可加“activeClassName=xxx”。5、封裝NavLinkimport React, Component from reactimport NavLink from react-router-domexport default class MyNavLink extends Component render() / console.log(ps);return (/使法Home說(shuō)明：1）標(biāo)簽體內(nèi)容，可以通過(guò)props接收，key值為children，即props.children2）標(biāo)簽體內(nèi)容也是特殊的標(biāo)簽屬性6、Switch的作1）通常情況下，pat

4、h和component是對(duì)應(yīng)關(guān)系2）Switch可以提路由匹配效率（單匹配）通俗的講，可以理解為：Switch于匹配到路由后，不會(huì)再向下繼續(xù)匹配7、解決多級(jí)路徑刷新頁(yè)樣式丟失的問(wèn)題1）.public/index.html 中 引樣式時(shí)不寫 ./ 寫 / （常）2）.public/index.html 中 引樣式時(shí)不寫 ./ 寫 %PUBLIC_URL% （常）3）.使HashRouter8、向路由組件傳遞參數(shù)1）.params參數(shù)路由鏈接(攜帶參數(shù))：詳情注冊(cè)路由(聲明接收)：接收參數(shù)：ps.match.params2）.search參數(shù)路由鏈接(攜帶參數(shù))：詳情注冊(cè)路由(需聲

5、明，正常注冊(cè)即可)：接收參數(shù)：ps.location.search備注：獲取到的search是urlencoded編碼字符串（key=value&key=value），需要借助querystring解析（react腳架已經(jīng)下載好了）3）.state參數(shù)路由鏈接(攜帶參數(shù))：詳情注冊(cè)路由(需聲明，正常注冊(cè)即可)：接收參數(shù)：ps.location.state備注：刷新也可以保留住參數(shù)9、BrowserRouter與HashRouter的區(qū)別1.底層原理不樣：BrowserRouter使的是H5的history API，不兼容IE9及以下版本。HashRouter使的

6、是URL的哈希值。2.path表現(xiàn)形式不樣BrowserRouter的路徑中沒(méi)有#,例如：localhost:3000/demo/testHashRouter的路徑包含#,例如：localhost:3000/#/demo/test3.刷新后對(duì)路由state參數(shù)的影響(1).BrowserRouter沒(méi)有任何影響，因?yàn)閟tate保存在history對(duì)象中。(2).HashRouter刷新后會(huì)導(dǎo)致路由state參數(shù)的丟失4.備注：HashRouter可以于解決些路徑錯(cuò)誤相關(guān)的問(wèn)題。10、默認(rèn)push，如果想replace，可在Link上加replace屬性即可。11、編程式路由導(dǎo)航借助this.p

7、rosp.history對(duì)象上的API對(duì)操作路由跳轉(zhuǎn)、前進(jìn)、后退-sp.history.push()-sp.history.replace()-sp.history.goBack()-sp.history.goForward()-sp.history.go()12、路由組件與般組件（vue不區(qū)分）1.寫法不同：般組件：路由組件：2.存放位置不同：般組件：components路由組件：pages3.接收到的props不同：般組件：寫組件標(biāo)簽時(shí)傳遞了什么，就能收到什么路由組件：接收到三個(gè)固定的屬性history: go(n)goBack:goBack(): goForward()push: push(path, state)replace: replace(path, state)location:pathname: /