react笔记15（react-router v4使用）

        网上关于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传参数）

代码

match对象打印

5 Demo2 嵌套路由

        本质上还是利用match对象中的url属性，params属性    

6 Demo 3: 带Path参数的嵌套路由 

    Repos组件如下图所示

7跳转重定向