当前位置: 移动技术网 > 科技>人工智能>物联网 > dva 路由配置

dva 路由配置

2020年07月19日  | 移动技术网科技  | 我要评论
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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网