react路由传参、路由跳转方式

普通路由传参的方式

search

// 传
this.props.history.push({
  pathname: path,
  search: 'name=huang&age=22'
})

// 取
this.props.location.search

params

// 传
/todo/:id

/todo/140504

// 取
this.props.match.params.id

通过state

// 传
this.props.history.push({
  pathname,
  state: {
    name: 'huang',
    age: 22
  }
})

// 取
this.props.location.state

dva路由跳转

.从props取出并传递history

取 const { history } = this.props
用 <button onClick={ () => history.push('/') }>go back home</button>

.withRouter, Link

1.withRouter：

<pre>import { withRouter, Link } from 'dva/router'
<button onClick={ () => history.push('/') }>go back home</button> export default withRouter(Counter);</pre>

2.Link：

import { withRouter, Link } from 'dva/router'; // 引入组件 

<Link to='/'>home page</Link> // 使用

.routerRedux

import { routerRedux } from 'dva/router';

effects: { 
*asyncDecr({ payload }, { call, put }) { 
      yield call(delay, 1000); yield put({type: 'decrement' }); 
      yield put( routerRedux.push('/') ); // 路由跳转
   }
},

routerRedux不仅可以在model里面使用，也可以在页面上使用，类似于：

// 页面上导入
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

/**
   * 路由跳转
   * @param {object} record - 列表行数据
   */
  @Bind()
  handleToDetail() {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname,
        search: ‘’, // 查询参数 类似于 普通路由search传参
      })
    );
  }

跳转过去的页面获取参数的方式为this.props.location。url的信息都在location里面

对于routerRedux来说是dva在redux、react-router-redux封装的库。这里不得不提react-router-redux出现的原因了。

redux 是状态管理的库，router （react-router）是(唯一)控制页面跳转的库。两者都很美好，但是不美好的是两者无法协同工作。换句话说，当路由变化以后，store 无法感知到。

redux是想把绝大多数应用程序的状态都保存在单一的store里，而当前的路由状态明显是应用程序状态很重要的一部分，应当是要保存在store中的。

目前是，如果直接使用react router，就意味着所有路由相关的信息脱离了Redux store的控制，假借组件接受router信息转发dispatch的方法属于反模式，违背了redux的设计思想，也给我们应用程序带来了更多的不确定性。

所以react-router-redux应运而生。
react-router-redux使用案例：

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import reducers from '<project-path>/reducers'

const store = createStore(
  combineReducers({
    ...reducers,
    routing: routerReducer
  })
)

const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App} />
    </Router>
  </Provider>,
  document.getElementById(‘app')
)

使用简单直白的api syncHistoryWithStore来完成redux的绑定工作，我们只需要传入react router中的history（前面提到的）以及redux中的store,就可以获得一个增强后的history对象。 将这个history对象传给react router中的Router组件作为props，就给应用提供了观察路由变化并改变store的能力。 现在，只要您按下浏览器按钮或在应用程序代码中导航，导航就会首先通过Redux存储区传递新位置，然后再传递到React Router以更新组件树。如果您计时旅行，它还会将新状态传递给React Router以再次更新组件树。