网上关于react-router的资料参差不齐,很多资料对于一些新手来说不是很友好,这里机智的明哥本着造福全人类的心态整理一份react-router v4版本的资料(实际上就是网上react-router 的视频都是v2版本的,而现在下载的npm包是v4版本,按照视频的代码根本就学不下去。。。)
1 安装:
npm install --save react-router-dom
react-router-dom比react-router多出了 DOM 类组件,因此我们引入的时候只需要引入 react-router-dom
2 引用:
BrowserRouter 使用了HTML5的history API来记录你的路由历史。
HashRouter 则使用URL( window.location.hash )的hash部分来记录,如果需要兼容老式浏览器,则应该使用 HashRouter
Router组件只能有一个子元素。子元素可以是HTML标签,也可以是一个react组件。
3 Demo1 基础路由的使用
上图中 / 同时匹配 / 和 /to,/search,/about。因此所有路由都匹配并被渲染。我们该如何避免呢?应该给path='/'的路由传递exact= {true}
` 这里再说一下path属性,path用来标识路由匹配的URL部分。React Router使用了Path-to-RegExp库将路径字符串转为正则表达式。然后正则表达式会匹配当前路径
4 Match对象
当路由路径和当前路径成功匹配,会生成一个对象,我们叫它match,match中包含很多url和path的信息
match.url.返回URL匹配部分的字符串。对于创建嵌套的很有用。
match.path.返回路由路径字符串 - 就是。将用来创建嵌套的。
match.isExact.返回布尔值,如果准确(没有任何多余字符)匹配则返回true。
match.params.返回一个对象包含Path-to-RegExp包从URL解析的键值对。(url传参数)
5 Demo2 嵌套路由
本质上还是利用match对象中的url属性,params属性
6 Demo 3: 带Path参数的嵌套路由
Repos组件如下图所示