dva 路由配置

以你之姓@ 2021-07-24 20:25 939阅读 0赞

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会未定义

发表评论取消回复

表情：

评论列表（有 0 条评论，939人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 配置路由,Apache配置路由之PHP

1，找到Apache的配置文件httpd.conf，搜索AllowOverride \ \ AllowOverride controls what directives m

朱雀/ 2023年01月17日 04:53/ 0 赞/ 181 阅读

相关 dva 路由跳转示例

此篇文章未经过全部验证，仅供参考转载自：[https://www.cnblogs.com/juexin/p/9407391.html][https_www.cnblog

雨点打透心脏的1/2处/ 2022年12月15日 02:26/ 0 赞/ 194 阅读

相关 dva+antd+ts的路由菜单布局

rfce（rcc）快速创建例子 1.路由配置 routes/config.ts import React from 'react' import {

小鱼儿/ 2022年12月02日 01:09/ 0 赞/ 240 阅读

相关【Express】—路由配置

【Express】—路由配置一、搭建环境，测试环境是否搭建成功 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

本是古典何须时尚/ 2022年08月29日 06:17/ 0 赞/ 229 阅读

相关静态路由配置

实现不同网段设备相互访问 ![场景][SouthEast] 实现PC1和PC2之间可以互通只要在Router1和Router2分别添加一条静态路由即可 `未添加静态

Myth丶恋晨/ 2022年06月10日 21:16/ 0 赞/ 1055 阅读

相关 dva学习-route路由学习

dva是单页面应用，虽然有不同的路由页面，但是变化的都是js文件。命令：curl + 网址可以查看当前网址的html，如果不同路由显示的都是相

逃离我推掉我的手/ 2022年05月17日 13:15/ 0 赞/ 315 阅读

相关基本路由和静态路由配置

R1(config)\ erase startup-config .在特权模式下使用 erase startup-config命令清除配置 R1(con

怼烎@/ 2022年02月20日 02:47/ 0 赞/ 526 阅读

相关配置多路由的静态路由

配置接口 IP地址并通过静态路由，实现全网互通使用ENSP搭建实验环境 ![配置多路由的静态路由][watermark_size_16_text_QDUxQ1RP5Y

拼搏现实的明天。/ 2022年01月13日 14:54/ 0 赞/ 513 阅读

相关 React 路由配置

转载https://blog.csdn.net/We\_jia/article/details/89353729\%E4%B8%80%E3%80%81%E8%B7%AF%E7%

╰半橙微兮°/ 2021年12月11日 10:49/ 0 赞/ 502 阅读

相关 dva 路由配置

1、引入 import { Router, Route, Switch } from 'dva/router'; 2、使用 im

以你之姓@/ 2021年07月24日 20:25/ 0 赞/ 940 阅读