dva路由跳转
路由器是网络连接不可或缺的组成部分，如果您对路由器设置和使用感到困惑，本文将为您提供一步一步的操作指南。
本文内容目录一览：
dva使用routerRedux.push 跳转路由
在 dva 中使用 dva-router 的 routerRedux 来跳转路由，如下：
如果要传递参数：
在 model 中获取参数：
系不系很简单呢
Dva快速入门，5分钟入门10分钟精通
dva 是一个基于 redux 和 redux-saga 的数据流方案，为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
目前最流行的社区 React 应用架构方案如下
1.路由：React-Router
2.架构：Redux
3.异步操作：Redux-saga
缺点：要引入多个库，项目结构复杂。
dva 是将上面三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。
dva = React-Router + Redux + Redux-saga
React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。
如果开发大应用，还需要解决2个问题。
·通信：组件之间如何通信
·数据流：数据如何和视图如何串联团磨起来？路由塌宏斗和数据如何绑定？
1.通信问题
组件会发生三种通信
（1）向子组件发消息
（2）向父组件发消息
（3）向其他组件发消息
React 只提供了一种通信绝答手段：传参。对于大应用来说很不方便。
react本身的传参是子组件通过父组件传入的函数，将自己的值再传回父组件。
2.数据流向：
数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为会先触发 Effects 然后流向 Reducers 最终改变 State。
// 1.创建应用
const app = dva();
// 2.注册插件
app.use(createLoading());
// 3.注册model
app.model(model);
// 4.取消model注册，清理reducers,effects和subscriptions
app.unmodel(namespace)
// 5.注册路由
app.router(()= );
// 6.启动应用
app.start('#root');
在这6步当中，dva完成了使用React解决view层、redux管理model、saga解决异步的主要功能。
Model 是 dva 最重要的部分，所有的应用逻辑都定义在它上面，可以理解为 redux、react-redux、redux-saga 的封装。通常项目中一个模块对应一个 model。
Model对象的属性：
1.namespace
是该 Model 的命名空间，只能用字符串，不支持通过 . 的方式创建多层命名空间。
2.state:
该 Model 当前的数据状态，直接决定了视图层的输出。
3.reducers:
Action处理器，处理同步操作，可以看做是state的计算器，类似于redux中的reducer，用来算出最新的state，是唯一可以修改state的地方，由action触发，它有state和action两个参数。
4.effects
Action处理器，处理异步动作，基于Redux-saga实现。
内部使用 yield 关键字，标识每一步的操作（不管是异步或同步）。
不能直接修改state，由action触发，也可触发action。
有action和effects两个参数，effects包含put、call和select三个字段，put用于触发action，类似于dispatch，call用于调用异步处理逻辑，select用于从state中获取数据。
5.subscriptions
用于订阅一个数据源，然后根据需要 dispatch 相应的 action。
相当于一个监听器，可以监听路由变化，鼠标，键盘变化，服务器连接变化，状态变化等，这样就可以根据不同变化做相应的处理，在这个subsription中的方法名是随意定的，每次变化都会去调用里面的所有方法，所以需要加相应的判断。
subscriptions: {
setup({ dispatch , history }){
window .onresize =()= {
//当浏览器的页面的大小变化时触发里面的dispatch方法
dispatch ( type : "save")
}
},
onClick({ dispatch }){
document .addEventListener('click',()= {
//当鼠标点击时触发里面的dispatch方法
dispatch ( type : "save")
})
}
}
写完model和组件后，需要将model和组件连接起来。dva提供了connect方法，connect是一个函数，绑定State到View。connect后的组件可以获取到dispatch和state。
import { connect } from "dva";
class Counter extends Component {
constructor(props){
super(props)
}
render(){
return div{this.props.example.initText}/div
}
}
const mapStateToProps =(state)={
//这里的example表示后面用this.props.example获取state（根节点）中exmpale命名空间中的state所有的数据
return {
example：state.example,
}
}
//把model层的数据传递到当前组件
export default connect(mapStateToProps)(Counter)
dispatch是一个函数方法，用来将Action发送到Model。
dispatch({
type: 'click-submit-button',
payload: this.form.data
})
被connect的Component会自动在props中拥有dispatch方法。
dva集成了isomorphic-fetch用于处理异步请求，并且使用dva-cli初始化的项目中，已经在./src/utils/request.js中对fetch进行了简单的封装，可以在这里根据服务端API的数据结构进行统一的错误处理。
最后千万注意：effects和reducers中的方法不能同名，否则会产生死循环
DVA 开发环境下 路由的跳转问题（routerRedux, Switch, Route）
在使用基于React的DVA框架开发时，遇到了不少的路由跳转问题，这里做一个小总结。
页面的跳转一般使用routerRedux.push 就可以了，当然兄判前面要先引入 import {routerRedux, Switch, Route} from 'dva/router';
用法也是比较简单的，如下：
dispatch(routerRedux.push({
pathname: url,
search: JSON.stringify(searchParams)
}))
路由的配置,这里我使用了Switch 和Route/ 搭配使用；
Switch标签里面只能有一个Route/可以输出
Switch
path='路径'
exact
children={() = (
//这里放页面Div
)}
/
Route
path=‘路径’
component={getComponent(window.dvaApp, ['evaluateStandard/addGroup'],
require('routes/evaluateStandard/AddGroup'))} //这里使用了我使用封装的一个方法，来匹配Modal层，也可以直接使用require
/
/Switch
这里要注意exact 这个属性，很多新手朋友会卡在这里，这个属性表示完全匹羡敏改拿兄配，也就是路径严格匹配，通过才会请求下面的页面，一般上一级的页面使用这个属性，往下一级就不用使用这个属性了；
PS:刚开始写文章，不足之处请大家指出来，谢谢
通过本文介绍的方法，你可以更好地掌控自己的无线网络，让上网更加顺畅。
