create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化
第一种:BrowserRouter把Menu和Route组给一起包起来
<Router></Router>标签要把Menu和Route组给一起包起来
修改src/index.js文件,相应内容如下:
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
- Menu.Item 部分:
<Menu.Item key="2">
<Link to='/'></Link>
</Menu.Item>
- Route 部分
<Route path='/' exact component={ButtonDemo}></Route>
第2种:引入history安装包
create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化的更多相关文章
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在vue-cli搭建的项目中增加后台mock接口
用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...
- react项目中使用antd
1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...
- 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...
- create-react-app 搭建的项目中,使用 CSS Modules
create-react-app 搭建的项目中,使用 CSS Modules: 修改config目录下 webpack.config.dev.js 和 webpack.config.prod.js 文 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
随机推荐
- nginx保持会话的方式
1)ip_hash 简单易用,但是有如下缺点 后端服务器宕机后,session会丢失 来自同一局域网的客户端会被转发到同一个后端服务器,可能导致负载失衡 不适用CDN网络,不适用于前段还有代理的情况 ...
- python 爬虫第三方库
这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...
- HTTPS双向认证+USB硬件加密锁(加密狗)配置
环境: Ubuntu14.04,apache2.4.7, openssl1.0.1f 安装apache2 apt-get install apache2 -y 一般openssl默认已经安装 开启a ...
- wx 设置监测并自动更新
checkUpdate(){ console.log('----->>checkVersionUpadte') const updateManager = wx.getUpdateMana ...
- HDU 6090 17多校5 Rikka with Graph(思维简单题)
Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...
- org.springframework.dao.InvalidDataAccessApiUsageException报错
2018-01-09 18:12:29,980 [qtp1501019626-21] ERROR - 外部接口调用方法[TestController$$EnhancerBySpringCGLIB$$8 ...
- asp.net 后台执行js
1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("XXX ...
- Spring Boot 揭秘与实战(二) 数据存储篇 - 声明式事务管理
文章目录 1. 声明式事务 2. Spring Boot默认集成事务 3. 实战演练4. 源代码 3.1. 实体对象 3.2. DAO 相关 3.3. Service 相关 3.4. 测试,测试 本文 ...
- 清除chrome浏览器HSTS缓存
如果你的网站启用了HSTS 在chrome中会用缓存效果,即使你的站点取消了HSTS,下次访问时,仍旧会自动给你重定向到HSTS. 那么如何清除 HSTS呢? chrome://net-interna ...
- xdoj-1211 (尧老师要教孩子解方程) :多项式除法
想法: 1 由于所有a[i] 是不为0的整数 所以解x是整数 2 其次解是an的约数 3 分解a[n] 用多项式除法判断约数是否为整式的解 #include<cstdio> #includ ...