react-router4相关属性api介绍

1.安装：

 cnpm i react-router --save   包含react router核心

cnpm i react-router-dom --save  包含react router的dom绑定

2，BrowserRouter

  有下面几个属性：

   a.  basename,用来设置路由的基础链接，<BrowserRouter basename="/api"/>;

   b.  getUserComfirmation,用来拦截Prompt组件，下面有个例子诠释；

   c.  forceRefresh,用来设置是否强制浏览器的整体刷新，默认是false

   d.  kelength，用来设置location.key的长度，默认是6，可以自定义

需要注意的是，BrowserRouter只能有一个字节点,如下所示：

import React from 'react' ；

import ReactDOM from 'react-dom'；

import { Prompt } from 'react-router'；

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'；

   const MyComponent1 = () => ( <div>组件一</div> )；

    const MyComponent2 = () => ( <div>组件二</div> ) ；

    class MyComponent extends React.Component {

          render() {

              const getConfirmation = (message,callback) => {

                                             const ConFirmComponent = () => (

                                                   <div>

                                                        {message}

                                                       <button onClick={() => {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>确定</button>

                                                       <button onClick={() => {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消</button>

                                                 </div> )

       ReactDOM.render( <ConFirmComponent />, document.getElementById('root1') ) }

       return (

                <Router getUserConfirmation={getConfirmation}>

                           <div>

                                <Prompt message="Are you sure you want to leave?" />

                                <Link to="/a">跳转组件二</Link>

                                <Route component={MyComponent1}/>

                               <Route exact path="/a" component={MyComponent2}/> </div>

                              </Router> ) } }

     ReactDOM.render( <MyComponent/>, document.getElementById('root') )

4.HashRouter

 这个用来兼容老浏览器的

5.link

 link的作用类似a标签

其属性：to   接受path字符串，如：<link to="/a"/>

                  也接受对象   如： <Link to={{pathname:'/cousrses',   //传递的pathname

                                                         search:'?sort=name',     //传递的url参数

                                                         hash:"#the-hash',        //在url后面的hash值

                                                         state:{fromDashboard:true}  //自定义属性存在location中

                                                       }}/>

                 replace设置true，会取代当前历史记录

6.Navlink

Navlink和link一样都是最终会渲染a标签，但前者还可以给这个a标签添加额外的属性

如<Navlink to="/a"> 组件一</Navlink> 当点击这个路由，a标签会默认添加一个名为active的class属性

  activeClassName 用于自定义激活a标签的class；

  activeStyle  用于设置激活a标签的样式，activestyle={{fontWeight:'bold';color:'red'}}

 exact ,当路径匹配的时候，才展示样式和class，但是不影响路由的匹配，“/a"和"/a/"是一样的；

 strict ,在这里，“/a"和“/a/”是不一样的，是来两个路由

 isActive,这个属性接受一个回调函数，用来做跳转的最后拦截，如： <NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>;

           const oddEvent = (match,location)=>{

                                                                 if(!match){return false;}

                                                                  console.log(match.id);

                                                                 return true;

                                                              }

其中，match里面保存了路由匹配信息的参数，是动态变化的；location里面保存了link中的to传递的所有信息，还有这个属性用来接受一个location对象，如果对象信息和location信息对象匹配则跳转，如：<NavLink to="/a/123" location={{key:"adaad",pathname:'/a/123'}}

7.Redirect

路由重定向，import {Redirect} from 'react-router',使用这个<Router to="/a"/> 代替组件使用，该路由可接受三个参数：

to:字符串，要重定向的路径，对象，location对象；push：布尔值，是否将当前路径存到history中（是link中标签的to路径）；

from:用来指定路由的原始值，如果不是给定的字符串，那么不渲染，反之，渲染；

8.Route

Route的作用就是用来渲染路由匹配的组件，路由渲染有三种方式，每种方式都可以传递match,location,history对象，

第一种：component.用来渲染组件 <Route path="/a" component={MyCompoennt}></Route>；

第二种：render,用来渲染函数式组件，可以防止重复渲染组件 <Route path="/b" render={({match,location,history}) => {console.log(match,location,history); return <div>组件</div>}}></Route>;

第三种：children 和render差不多，不过可以用来动态的展示组件，差别在于，children会在路径不匹配的时候也调用回调函数从而渲染组件，而后者只有绝对匹配的时候才渲染。

<Route path="/b" children={({match,location,history}) => { return (match ? <div>组件1</div>:<div>组件二</div>)}}</Route>

其中，path，字符串，表示匹配的路径；exact,布尔值，路径完全匹配的时候跳转 '/a"和'/a/'是一样的；strict，同exact，只不过是严格匹配；location，传递route对象，和当前的route对象对比，成功就跳转，否则不跳转；

 

转载于:https://my.oschina.net/u/4050621/blog/3029296