[TOC] ### 1. 創建要跳轉的頁面 ~~~ //src>routes>DetailPage.js import React from 'react'; import { connect } from 'dva'; function DetailPage() { return ( <div> <h1>detail</h1> </div> ); } DetailPage.propTypes = { }; export default connect()(DetailPage); ~~~ ### 2. 配置link標簽(在要使用跳轉的頁面) > 方式一（可與react相同） > 1. import { Link } from 'react-router-dom' > 2. <Link to={'/detail/'}>跳轉</Link> > 方式二（傳參） > 1. import { Link } from 'dva/router'; > 2.<Link to={{pathname:'/detail/', query:{foo: 'foo', boo:'boo'}, state:{data:'hello'} }}>跳轉</Link> ~~~ //跳轉頁面接收參數 import React from 'react'; import { connect } from 'dva'; function DetailPage(props) { { console.log(props) } return ( <div> <div>{props.location.state.data}</div> </div> ); } export default connect()(DetailPage); ~~~ ### 3. 配置router.js ~~~ //src>router.js import React from 'react'; import { Router, Route, Switch } from 'dva/router'; import IndexPage from './routes/IndexPage'; + import DetailPage from './routes/DetailPage'; function RouterConfig({ history }) { return ( <Router history={history}> <Switch> <Route path="/" exact component={IndexPage} /> + <Route path="/detail" exact component={DetailPage} /> </Switch> </Router> ); } export default RouterConfig; ~~~