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的调用* |
来自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>
- 组成
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 | 静态路由的小助手 |
- 引用
只是用 react-router-dom就可以了
- 组件
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 |
|
<Route component> |
|
<Route render> | <Route path="/home" render={() => <h1>Home</h1> } /> |
<Route children> | <Route path = {to} children = { () => (<li className={match? 'active': ''}> <Link to ={to} {…rest}/> </li>) } |
不同的运行场景下使用不同的渲染方式,大部分时间用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组件下只允许存在一个元素)
是所有路由组件共用的底层接口,一般不使用这个接口,而是使用高级路由
<BrowserRouter> | 使用HTML5提供的history API 来保持 ui 和 url同步 |
<HashRouter> | 使用 URL 的 hash (例如:window.location.hash) 来保持 UI 和 URL 的同步; |
<MemoryRouter> | 能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写); |
<NativeRouter> | 为使用React Native提供路由支持; |
<StaticRouter> | 从不会改变地址; |
Link
使用react-router-dom时,用来代替 <a>标签
to:string | 跳转到指定的路径 |
|
to:object | 携带参数跳到指定的路径 | <Link to={{ pathname: '/course', search: '?sort=name', state: { price: 18 } }} />
|
例如: <link to={{pathname: '/course', search: '?sort=name', state: { price:18}}} />
replace:bool | 当为true的是时候, 点击后,新地址替换掉上一个地址的历史纪录 |
NavLink
这是link特殊版本,为导航的激活状态准备的
activeClassName:string | <NavLink to="/about"activeClassName="selected">MyBlog</NavLink> |
activeStyle:object | <NavLink to="/about" activeStyle={{ color: 'green', fontWeight: 'bold' }} |
exact:bool 严格匹配地址
stict:bool 地址斜杠的严格匹配
isActive:func 导航激活时候做点什么
Switch
之渲染出第一个与当前地址匹配的 <Route>或<Redirect>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
只匹配 /about不匹配 其他,就要用到<switch>
<Switch>
<Route exact path="/"component={Home}/>
<Route path="/about"component={About}/>
<Route path="/:user"component={User}/>
<Routecomponent={NoMatch}/>
</Switch>
Switch:node
<Switch> 下的节点只能是 <Route> 或 <Redirect> 元素。
只有与当前访问地址匹配的第一个子节点才会被渲染。
<Route> 元素用它们的 path 属性匹配,
<Redirect> 元素使用它们的 from 属性匹配
<Redirect>
导航到一个新地址,这个新地址覆盖在访问历史信息里面的本该访问的那个地址
to:string | 重定向的URL字符串 |
to:object | 重定向的location对象 |
push:bool | 若为真,重定向将会把新地址加入到访问的历史记录里面,并且无法回退 |
from:string | 需要重定向的路径 |
<Redirect from="/old/:str" to="/new/123"/>
Prompt
当用户离开当前页面前做出一些提示
message:string | <Prompt message="确定要离开?" /> |
message:func | <Prompt message={location => ( |
when:bool | <Prompt 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 对象是可变的,因为建议从 <Route> 的 prop 里来获取 location,而不是从history.location 直接获取。这样可以保证 React 在生命周期中的钩子函数正常执行
来自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>
在以下情境中可以获取 location 对象
在 Route component 中,以this.props.location 获取
在 Route render 中,以 ({location}) =>() 方式获取
在 Route children 中,以 ({location})=> () 方式获取
在 withRouter 中,以 this.props.location的方式获取
- <Link to={location} />
- <NaviveLink to={location} />
- <Redirect to={location />
- history.push(location)
- history.replace(location)
来自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>
match 对象包含了 <Route path> 如何与 URL 匹配的信息,具有以下属性:
params: object | 路径参数,通过解析 URL 中的动态部分获得键值对 |
isExact: bool | 为 true 时,整个 URL 都需要匹配 |
path: string | 用来匹配的路径模式,用于创建嵌套的 <Route> |
url: string | URL 匹配的部分,用于嵌套的 <Link> |
以下情境中可以获取 match 对象
在 Route component 中,以this.props.match获取
在 Route render 中,以 ({match}) => ()方式获取
在 Route children 中,以 ({match}) =>() 方式获取
在 withRouter 中,以 this.props.match的方式获取
matchPath 的返回值
当一个 Route 没有 path 时,它会匹配一切路径。
来自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>