普通路由传参的方式
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以再次更新组件树。
网友评论