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 ...
随机推荐
- AbstractBootstrap.bind()
------------------headContext也就是pipeline最开头的那个handlercontext中的bind方法@Override public void bind( Chan ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- L248 词汇题 2006
The audience, hostile at first, were greatly impressed by her excellent performance. He wanted to st ...
- MySQL:数据库的基本操作
第二篇.数据库的基本操作 一.创建数据库 附:创建数据库并不意味输入数据在这个数据库中,只有用切换数据库才可以输数据到这个数据库中. 1.创建数据库 格式:create database数据库名字 [ ...
- Day20作业及默写
1.请使用C3算法计算出链接图中的继承顺序-Link 一 graph BT id1[A]-->id2[B] id2[B]-->id6[F] id6[F]-->id7[G] id1[A ...
- date简述
Date 定义时间和日期的类 java.util.Date 1s=1000ms; 时间的原点:公元1970年1月1日 00点00分00秒: public class DateDemo { publ ...
- js - 如何使子元素阻止继承父元素事件
想要阻止点击 #content 区域时触发a事件,需要在 #content 区域内加入阻止事件冒泡的代码,具体代码如下: <div id="box" onclick=&quo ...
- SQL注入之Sqli-labs系列第十五关和第十六关(基于POST的时间盲注)
开始挑战第十五关(Blind- Boolian Based- String)和 第十六关(Blind- Time Based- Double quotes- String) 访问地址,输入报错语句 ' ...
- python 和 matlab的caffe读数据细节
(1).prototxt中的输入表示一样,如 dim: 10 dim: 3 dim: 227 dim: 227 (2)代码喂入数据不一样: python: input_blob = np.ze ...
- [Algorithm] Good Fibonacci
def good_fibonacci(n): if n<=1: return (n,0) else: (a,b)=good_fibonacci(n-1) return (a+b,a)