react-router 4.0 格式化文档

 

html4 history api	html5 history api
+ history.length 历史记录条数   + history.go(n) n可为正负数 任意前进或后退n步   + history.back(); 后退   + history.forward(); 前进	+ history.pushState(data, title, [url]); *往历史记录堆栈顶部添加一条记录*      `data`: onpopstate事件的回调中作为参数传入     `title`: 页面标题，目前浏览器都会忽略这个参数     `url`: 页面地址 默认为当前url   + history.replaceState(data, title, [url]); *替换当前历史记录，参数同pushState方法*   + history.state *存储上述方法的 data数据,不同浏览器读写权限不一样*   + window.onpopstate *响应pushState或replaceState的调用*

来自

 

1. 组成

v4版本，遵循react的理念： 一切皆组件

这次的react 由若干独立的包组成。

1.react-router	核心
2.react-router-dom	用于绑定Dom
3.react-router-native	用于React Native 的 react router
4.react-router-redux	是react-router 和 redux 集成
5.react-router-config	静态路由的小助手

 

1. 引用

只是用 react-router-dom就可以了

 

 

1. 组件

BrowserRouter

1.basename:string	为根目录指定基准位置
2.getUserConfirmation: func	进入页面之前弹出提示框
3.forceRefresh:bool	让不支持HTML5history API的浏览器强制刷新页面
4.keyLength:number	设置 路由的 location.key的长度，默认为6
5.children:node	this.props.children

 

Route 自带三种 render渲染方式  和三个 props属性

render
	render={() => Home } />
	( >  ) }

不同的运行场景下使用不同的渲染方式，大部分时间用component

Props
match
location
history

每种渲染方式都有这些props

 

path:string

可以被 paht-to-regexp解析为有效的url路径

不过指定path ，那么路由将总是匹配

exact :bool

如果为true , path 为精确匹配

strict:bool

路径末尾斜杠的匹配， 为true ， ‘/one/ 不能匹配'/one', 但能匹配'/one/two'

 

 

 

Router（注意：Router组件下只允许存在一个元素）

是所有路由组件共用的底层接口，一般不使用这个接口，而是使用高级路由

	使用HTML5提供的history API 来保持 ui 和 url同步
	使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
	能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；
	为使用React Native提供路由支持；
	从不会改变地址；

 

Link

使用react-router-dom时，用来代替 标签

to:string	跳转到指定的路径
to:object	携带参数跳到指定的路径	pathname: '/course', search: '?sort=name', state: { price: 18 } }} />

例如：

replace:bool

当为true的是时候， 点击后，新地址替换掉上一个地址的历史纪录

 

NavLink

这是link特殊版本，为导航的激活状态准备的

activeClassName:string	to="/about"activeClassName="selected">MyBlog</NavLink>
activeStyle:object	"/about" activeStyle={{ color: 'green', fontWeight: 'bold' }} >MyBlog</NavLink>

exact:bool  严格匹配地址

stict:bool 地址斜杠的严格匹配

isActive:func  导航激活时候做点什么

 

Switch

之渲染出第一个与当前地址匹配的 或

"/about" component={About}/>

只匹配 /about不匹配 其他，就要用到

 

 
 
 
 

 

Switch:node

下的节点只能是 或 元素。

只有与当前访问地址匹配的第一个子节点才会被渲染。

 

 元素用它们的 path 属性匹配，

 元素使用它们的 from 属性匹配

 

导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址

to:string	重定向的URL字符串
to:object	重定向的location对象
push:bool	若为真，重定向将会把新地址加入到访问的历史记录里面，并且无法回退
from:string	需要重定向的路径

 

 

Prompt

当用户离开当前页面前做出一些提示

message:string	"确定要离开？" />
message:func	{location => (           `Are you sue you want to go to${location.pathname}?`    )} />
when:bool	when={this.state.dirty}           message="数据尚未保存，确定离开？" />

 

 

History

 

"browser history"	- history 在 DOM 上的实现，用于支持 HTML5 history API 的浏览器
"hash history"	- history 在 DOM 上的实现，用于旧版浏览器。
"memory history"	- history 在内存上的实现，用于测试或非 DOM 环境（例如 React Native）。

 

 history 常用的属性和方法：

length

action: push  replace pop

location:object

pathname:string

search:string

hash:string

state:string

push

replace

go(n)

goBack()  ==go(-1)

goForward == go(1)

block(prompt) 阻止跳转

 

history 对象是可变的，因为建议从  的 prop 里来获取 location，而不是从history.location 直接获取。这样可以保证 React 在生命周期中的钩子函数正常执行

 

来自

 

在以下情境中可以获取 location 对象

在 Route component 中，以this.props.location 获取

在 Route render 中，以 ({location}) =>() 方式获取

在 Route children 中，以 ({location})=> () 方式获取

在 withRouter 中，以 this.props.location的方式获取

• history.push(location)
• history.replace(location)

 

来自

 

 

match 对象包含了 如何与 URL 匹配的信息，具有以下属性：

params: object	路径参数，通过解析 URL 中的动态部分获得键值对
isExact: bool	为 true 时，整个 URL 都需要匹配
path: string	用来匹配的路径模式，用于创建嵌套的
url: string	URL 匹配的部分，用于嵌套的

以下情境中可以获取 match 对象

在 Route component 中，以this.props.match获取

在 Route render 中，以 ({match}) => ()方式获取

在 Route children 中，以 ({match}) =>() 方式获取

在 withRouter 中，以 this.props.match的方式获取

matchPath 的返回值

当一个 Route 没有 path 时，它会匹配一切路径。

来自