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的调用* 

来自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>

 

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 

静态路由的小助手

 

2. 引用

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

 

 

3. 组件

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' }}
>MyBlog</NavLink>

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 => (
          `Are you sue you want to go to${location.pathname}?`
   )} />

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>