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 ...
随机推荐
- C#窗体换肤
Form1.cs using System;using System.Collections.Generic;using System.ComponentModel;using System.Data ...
- React Native Headless JS(后台任务)(转载)
React Native Headless JS(后台任务) Headless JS是一种使用js在后台执行任务的方法.它可以用来在后台同步数据.处理推送通知或是播放音乐等等. JS端的API 首先我 ...
- urllib.request中Handler处理器
1.定义 自定义的urlopen()方法,urlopen()方法是一个特殊的opener(模块已定义好),不支持代理等功能,通过Handler处理器对象来自定义opener对象 2.常用方法 1.bu ...
- Error Downloading Packages: yum更新出现错误
yum install lrzsz 失败报错: 解决思路: 1:执行yum clean all 清除缓存目录下的软件包及旧的headers: 2:接着执行 yum list 重新列出所有已经安装和可 ...
- xdoj--1077: (循环节长度)
1077: 循环节长度 时间限制: 1 Sec 内存限制: 128 MB提交: 103 解决: 37[提交][状态][讨论版] 题目描述 数一有很多的有理数,然而有的是有限小数,如1/2=0.5, ...
- ajax遍历数组对象
success: function(data){ console.log(data); for (var warn in data) { alert(data[warn].kh_lxr); } } d ...
- putty 、xshell的使用 和 putty 、xshell、 shell 间免密登陆
相关软件的使用: ######################################################################### 以上是相关软件的使用! 以下是免密 ...
- EasyUI 文本框回车和普通回车
easyui 回车 $('#Destination_Code').textbox('textbox').bind('keypress', function (e) { ) { } } 普通回车 < ...
- 实验吧—隐写术——WP之 男神一般都很低调很低调的!!
首先我们打开解题连接~ 是直接给我们下载了一个压缩文件,解压后得到: 确实是很帅的小哥哥呢,呵呵...... 分析题目提示,“获取隐藏在图片中的flag”,嗯~这句很重要,他决定了我们要先用那种工具 ...
- [工作记录] NDK: AKEYCODE_DEL not notified
https://code.google.com/p/android/issues/detail?id=42904#makechanges 我们游戏的输入系统是自己渲染(通过跨平台渲染接口)的. 首先有 ...