react-router与react-router-dom

一、路由的跳转

1.在react-router中

在router4.0以上版本中
直接this.props.history.push('/path')可以进行跳转了
或者引入hashHistory
<Router history={hashHistory} routes={routes} />

hashHistory.push( 'cstats/allProd');

在router3.0以上版本中
this.props.router.push('/path')实现跳转

2.在react-router-dom中

直接this.props.history.push('/path')可以进行跳转了

3.带参数的路由的跳转

###react-router
###配置路由时需引入hashHistory
<Router history={hashHistory}>

 hashHistory.push({
      pathname: 'cstats/allProd',
      state: {
        lastDate: end,
        rankType: this.state.rankType
      }
    });

###react-router-dom
  this.props.history.push({
      pathname: '/risk/mhs/detail',
      search: queryString.stringify({
        prod: prod,
        type: type
      })
    })

4.在子组件中跳转路由

需要给父组件添加属性history

###父组件
 <ProdScoreRank
     data={totalRank}
     title="全部产品线排名"
     height={750}
     itemHeight={16}
     itemMargin={3}
     search={false}
     more={true}
     startTime={startTime}
     endTime={endTime}
     history={this.props.history}
     onMoreClick={() => {
        this.handleMoreVisible(true);
    }}
     />

###子组件
 this.props.history.push({
          pathname:'/risk/mhs/myProd',
          search: queryString.stringify({
              prod:prod
          })
      })

二、参数的获取

使用this.props.match.params.xxx 可以获取到当前路由的参数

###在react-router中
   let currentProd = queryString.parse(this.props.location.query).prod;

###在react-router-dom中
   let currentProd = queryString.parse(this.props.location.search).prod；

三、this.props

1.react-router

CB95C6D5-5FE4-402F-9CAE-393359E0FCFF_meitu_1.jpg

可以看出在react-router3.0版本中有以下属性：

1.1this.props.children

它表示组件的所有子节点。

1.2this.props.location

image.png

1.3this.props.params

参数匹配

1.4this.props.route

image.png

1.5this.props.routeParams

1.6this.props.router

image.png

1.7this.props.routes

image.png

2.react-router-dom

image.png

在react4.0版本中有以下属性：

2.1this.props.history

image.png
常用的属性有：this.props.history.push

2.2this.props.location

image.png
常用的属性：this.props.location.pathname,this.props.location.search,this.props.location.state

2.3this.props.match

this.props.match

常用的属性有：this.props.match.params、this.props.match.path