第一种:BrowserRouter把Menu和Route组给一起包起来

  1. <Router></Router> 标签要把Menu和Route组给一起包起来

    修改src/index.js文件,相应内容如下:
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
  1. Menu.Item 部分:
<Menu.Item key="2">
<Link to='/'></Link>
</Menu.Item>
  1. Route 部分
<Route path='/' exact component={ButtonDemo}></Route>

第2种:引入history安装包

此页面上有说明(说明所在大标题:组件外导航与 react-router-redux):https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651553926&idx=2&sn=696c0b5aa33636a15df09406a5f7812c&chksm=80255747b752de51241d6d2e3bb5265c80a3b2e36ac6ba928aa842ff3a8dda2a127276fc2ad0&mpshare=1&scene=1&srcid=0408St8McEc0NRtgLpU5XTFj&key=c9369063c8731b8275219f4cd3d1a910d4a0f656c8d01df81647d4aee483a31c0981b91690f70f012ee15e0ef68b319c047ca204e4b66dd203d2b869eec454556dcd4d52addab2d34766fd69aab9f639&ascene=0&uin=ODA1NjgxMTgx&devicetype=iMac+MacBookPro13%2C2+OSX+OSX+10.12.6+build(16G29)&version=12020810&nettype=WIFI&lang=zh_CN&fontScale=100&pass_ticket=sHv1WqmyWvuixoURe0pbURR7NEnVQmlGTGCnMjxI74edItHAQ5zQSmIu5AHv8FyC

create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  4. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  5. react项目中使用antd

    1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...

  6. 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

    在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...

  7. create-react-app 搭建的项目中,使用 CSS Modules

    create-react-app 搭建的项目中,使用 CSS Modules: 修改config目录下 webpack.config.dev.js 和 webpack.config.prod.js 文 ...

  8. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  9. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

随机推荐

  1. webstorm安装流程

    第一步:双击安装目录 修改安装目录 尽量不要放在C盘 第二步: 把汉化包 直接复制文件到WebStorm安装目录中lib文件夹中即可,重新打开WebStorm就可以了

  2. 18-09-27 pandas 学习02

    如何系统的学习python 中有关数据分析和挖掘相关的库?什么是系统的学习?系统的学习就是一个先搭建只是框架体系,然后不断填充知识看,不断更新迭代的过程. Pandas,numpy,scipy,mat ...

  3. JavaWeb:动作标识

    动作标识 一.包含文件标识<jsp:include> 1.介绍 用于向当前页面中包含其他文件.被包含的文件可以是动态文件,也可以是静态文件 2.语法格式 <jsp:include p ...

  4. python自学第6天,文件修改,字符编码

    文件的修改: 一般是把旧文件的内容改了,在写入到新的文件中去. file_old=open("test","r",encoding="utf-8&qu ...

  5. centos的mysql升级之后密码重置

    1.配置文件添加过滤密码选项 #vim  /etc/my.cnf 跳过密码校验 2.重启mysql服务 #/etc/init.d/mysqld  restart 3.#mysql -uroot -p ...

  6. Beta阶段复审

    名字 优点 缺点 排名 都行可以随它去 1.界面美观,比较的友好: 2.新增记账的邮箱提醒功能. 1.程序有什么具体的bug和或缺陷?(1)没有账单删除的功能:(2)预算没有什么必要.2.项目的目标实 ...

  7. 莫烦tensorflow(4)-placeholder

    import tensorflow as tf input1 = tf.placeholder(tf.float32)input2 = tf.placeholder(tf.float32) outpu ...

  8. [转]Ubuntu安装Python3.6

    Ubuntu安装Python3.6   Ubuntu默认安装了Python2.7和3.5 输入命令python

  9. threejs linesegment的拾取实验

    通过对线段(图中的线段在绘图里,是一条线段)的拾取发现如下几个特点: 1)index表示一条线段的from向量index,即第几个分段: 2)线段空白的地方拾取不到(不属于线段上): 3)为何用多条分 ...

  10. NCPC 2016:简单题解

    A .Artwork pro:给定N*M的白色格子,然后Q次黑棒,输出每次加黑棒后白色连通块的数量.(N,M<1e3, Q<1e4) sol:倒着离线做,并查集即可. (在线做法:http ...