react中dva使用技巧总结

一.dva他是一个集成化管理redux，router的轻量级框架

二.dva的路由配置三部曲

1.在src/index.js文件里面配置路由信息

app.router(require('./router').default);

2.在src/router.js里面添加路由

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Products from './routes/Products'

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path='/products' exact component={Products} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

3.在routes文件夹下面建立路由组件

import React from 'react'
import { connect } from 'dva'

const Products = ({ dispatch, products }) => {
  return (
    <div>
      <h2>helloWorld</h2>
    </div>
  )
}

export default Products

三.跳转路由的方式

1.import { Link } from 'react-router-dom';
<Link to='/products'>点我啊</Link>

2.在组件里面直接用this.props.push('/products')

总结：
react的路由就是在全局index.js里面配置app属性去管理路由，
在router.js文件里面配置路由跳转路径
在route目录下面建立路由组件
在component目录下面建立路由组件的子组件