react路由

路由

• 实现路由的核心功能

安装

cnpm i  react-router-dom

基于react-router,加入了在浏览器运行的一些功能
例如:

1. Link组件,会渲染一个a标签
2. navLink组件
3. BrowserRouter组件
4. HashRouter组件
   两种模式的路由(hash和history)
   **所有的跟组件只能调用一次,因为浏览器只有一个url地址,且所有的组件只能在跟组件内使用 **

BrowserRoute

使用pushState和popState事件构建路由,就是一个history模式的一个根组件

HashRouter

使用window.location.hash和hashchange事件构建路由

Route

路由配置的具体实现,它指当路径匹配的时候渲染哪一个UI

• path
• 是用于指定路径名的
• component
• 当路径匹配时渲染UI,内部实现用的是React.createElement()方法,即每一次都会触发卸载和创建组件如果渲染的UI没有多余的内容,推荐使用render
• exact
• 匹配路径名指定更为严格的匹配规则(path等于location.pathname时才会匹配成功)
• children
• 与render类似,唯一的区别就是不管路径是否匹配都会渲染,所以他最合适做转场动画

通过Route组件调用的叫视图组件,Route组件在调用组件时候,会传递参数过去

const props ={
	match,//记录的是配信息
	location,//记录的是当前页面的url信息以及匹配时候传递的一些额外数据
	history,//是我们浏览器对象
	staticContext
}

Switch

渲染第一个被location匹配到的并且作为子元素的或者<Rdi’rect>

Link

解析为a标签,a标签会加载整个页面,link组件的to属性会执行history的pushState方法,不会重载整个页面

NavLink

在link的基础上,添加了类名,activeClassName:String
当元素处于激活状态时应用的类,默认为active
activeStype:object