react系列学习（五）-react-router-dom5.X的使用及相关问题详解

1、reactreact-router-dom5.X的使及相关问题详解1、例界如下图：2、代码：2.1、主页：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完全(严格)匹配。嵌套路由时不要，如上述例 ，如果了exact，则匹配不到/topicc/:topicId。因为先从级路由开始匹配。4、NavLinkLink的升级版，可设置链接亮。默认加“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说明：1）标签体内容，可以通过props接收，key值为children，即props.children2）标签体内容也是特殊的标签属性6、Switch的作1）通常情况下，pat

4、h和component是对应关系2）Switch可以提路由匹配效率（单匹配）通俗的讲，可以理解为：Switch于匹配到路由后，不会再向下继续匹配7、解决多级路径刷新页样式丢失的问题1）.public/index.html 中 引样式时不写 ./ 写 / （常）2）.public/index.html 中 引样式时不写 ./ 写 %PUBLIC_URL% （常）3）.使HashRouter8、向路由组件传递参数1）.params参数路由链接(携带参数)：详情注册路由(声明接收)：接收参数：ps.match.params2）.search参数路由链接(携带参数)：详情注册路由(需声

5、明，正常注册即可)：接收参数：ps.location.search备注：获取到的search是urlencoded编码字符串（key=value&key=value），需要借助querystring解析（react脚架已经下载好了）3）.state参数路由链接(携带参数)：详情注册路由(需声明，正常注册即可)：接收参数：ps.location.state备注：刷新也可以保留住参数9、BrowserRouter与HashRouter的区别1.底层原理不样：BrowserRouter使的是H5的history API，不兼容IE9及以下版本。HashRouter使的

6、是URL的哈希值。2.path表现形式不样BrowserRouter的路径中没有#,例如：localhost:3000/demo/testHashRouter的路径包含#,例如：localhost:3000/#/demo/test3.刷新后对路由state参数的影响(1).BrowserRouter没有任何影响，因为state保存在history对象中。(2).HashRouter刷新后会导致路由state参数的丢失4.备注：HashRouter可以于解决些路径错误相关的问题。10、默认push，如果想replace，可在Link上加replace属性即可。11、编程式路由导航借助this.p

7、rosp.history对象上的API对操作路由跳转、前进、后退-sp.history.push()-sp.history.replace()-sp.history.goBack()-sp.history.goForward()-sp.history.go()12、路由组件与般组件（vue不区分）1.写法不同：般组件：路由组件：2.存放位置不同：般组件：components路由组件：pages3.接收到的props不同：般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性history: go(n)goBack:goBack(): goForward()push: push(path, state)replace: replace(path, state)location:pathname: /