欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

dva 路由配置

程序员文章站 2022-07-10 16:05:08
1、引入import { Router, Route, Switch } from 'dva/router';2、使用import React from 'react';import { Router, Route, Switch } from 'dva/router';import IndexPage from './routes/IndexPage/IndexPage';import ProductPage from './routes/ProductPage/index'...
1、引入
	import { Router, Route, Switch } from 'dva/router';
	
2、使用
	import React from 'react';
	import { Router, Route, Switch } from 'dva/router';
	import IndexPage from './routes/IndexPage/IndexPage';
	import ProductPage from './routes/ProductPage/index'

	function RouterConfig({ history }) {
	  return (
	    <Router history={history}>
	      <Switch>
	        <Route path="/" exact component={IndexPage} />
	        <Route path="/product" exact component={ProductPage} />
	      </Switch>
	    </Router>
	  );
	}
	
	export default RouterConfig;
	
3、注册路由,在index.js中

	app.router(require('./router').default);   .default将路由的RouterConfig配置出来

4、若将Hash路由模式替换成BrowserHistory
	
	1、安装
		cnpm install --save history
	
	2、在主入口文件index.js中
		import { createBrowserHistory as createHistory } from 'history';
	
	3、改写初始化app
		const app = dva({
		    history: createHistory(),
		});
		
5、路由导航(除了routerRedux和引入方式,其余和react导航相同)

	声明式导航:
		import {Link,NavLink} from 'dva/router'
		 <Link to='/'>跳转</Link>
		 <NavLink to='/'>跳转</NavLink>
		 
	编程式导航:
		方式一:
			this.props.history.push('/url')
		
		方式二:
			import {routerRedux} from 'dva/router'
			
			this.props.dispatch(routerRedux.push('/'));  
			 其中:
				此种方法不能连接model的方法
				即export default connect(mapStateToProps)(App),不能有mapDispatchToProps,否则dispatch会未定义

本文地址:https://blog.csdn.net/weixin_43294560/article/details/107419057

相关标签: dva.js dva