React Router概述（路由）

React路由

##站点

　1.可以根据不同的地址，展示不同的组件

　2.可以无刷新的跳转页面

具备上面两个功能的可以称之为路由

#React Router

　1.react-router：路由核心库，包含诸多和路由相关的核心代码

　2.react-router-dom:利用路由核心库，结合实际页面，实现跟页面路由密切相关的功能

 

两种模式

路由：根据不同的地址，展示不同的组件

网络地址：https://www.baidu.com:132/news？a=1

协议名(schema)：https

主机名（host）：www.baidu.com

 

##Hash Router 哈希路由

　1.根据url地址中的哈希值来确定显示的组件（原因：哈希值改变，不会刷新页面）

　这种模式兼容新最好

## Broswer History Router 浏览器历史记录路由

　1.HTML5出现后，新增了History Api 后，浏览器拥有了改变路径二不刷新页面的方式

　　History表示浏览器的历史纪录，它使用栈的方式存储

　history.length：获取栈中的数据量

　history.pushState()

　　参数1：附加的数据，自定义的数据，可以是任何类型

　　参数2：页面标题，目前大部分浏览器不支持

　　参数3：新的地址

　history.replaceState()　

　　参数1：附加的数据，自定义的数据，可以是任何类型

　　参数2：页面标题，目前大部分浏览器不支持

　　参数3：新的地址

　　根据页面的路径来决定渲染哪个组件

##路由组件

　　React-Router 为我们提供了两个重要的组件

##Router组件

　　它本身不会做任何展示，仅提供路由模式配置，另外，该组件会产生一个上下文，上下文中会提供一些使用的对象和方法，供其他相关组件使用

1.HashRouter ：该组件，使用hash模式匹配

2.BrowserRouter：该组件使用了BrowserHistory模式匹配

通常情况下，Router组件只有一个，该组件包裹整个页面

##Route组件

根据不同的地址，展示不同的组件

两个重要属性

　　1.path：匹配的路径

　　　默认情况下不区分大小写， 可以添加boolean属性sensitive来控制是否区分大小写　

　　　默认情况下，只匹配根目录，加上boolean属性exact进行精确匹配　　

　　　如果不写path的话，会匹配所有路径

　　2.component：匹配成功后显示的组件（函数组件）

　　3.children：

　　　　1.传递React元素，无论是否匹配，一定会显示children，并且会忽略component属性

　　　　2.传递一个函数，该函数有多个参数，这些参数来自于上下文，该函数返回React元素，则一定会显示返回的元素，并且忽略component属性

　　Route组件可以卸写在任何地方，只要保证他是Router组件的后代元素

##Switch组件

写到Switch组件中的Route组件，只要匹配到了就不会继续往下匹配了

由于Switch组件会循环所有子组件，然后让每一个子组件去匹配，若匹配到，则渲染对应组件，然后停止循环，因此，不能在Switch组件中的子元素使用除了Router和Redirect以外的组件