第一种: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. SharePoint REST API - 基本操作(二)

    博客地址:http://blog.csdn.net/FoxDave 上一节讲了SharePoint REST API的一些基本操作,本节将继续介绍一些关于SharePoint REST API的内容. ...

  2. elasticsearch学习笔记——相关插件和使用场景

    logstash-input-jdbc学习 ES(elasticsearch缩写)的一大优点就是开源,插件众多.所以扩展起来非常的方便,这也造成了它的生态系统越来越强大.这种开源分享的思想真是与天朝格 ...

  3. TDate赋值给Variant时注意的问题

    //Delphi 10.3.1 32bit, Win 7 32bit procedure TForm1.btnTimeToVariantClick(Sender: TObject); var d:TD ...

  4. Centos7 Tomcat9随机启动

    环境: Centos7.JDK 1.8.Tomcat9 安装好JDK跟Tomcat后在/usr/lib/systemd/system/目录下新建文件tomcat.service,内容如下,对应的位置替 ...

  5. 链表 c实现

    linklist.h #ifndef _LINKLIST_H_ #define _LINKLIST_H_ typedef int data_t; typedef struct node{ data_t ...

  6. 支付宝异步通知(notify_url)与return_url.

    支付宝接口使用文档说明 支付宝异步通知(notify_url)与return_url. 现支付宝的通知有两类. A服务器通知,对应的参数为notify_url,支付宝通知使用POST方式 B页面跳转通 ...

  7. 为什么说Java中只有值传递?

    一.为什么说Java中只有值传递? 对于java中的参数传递方式中是否有引用传递这个话题,很多的人都认为Java中有引用传递,但是我个人的看法是,Java中只有值传递,没有引用传递. 那么关于对象的传 ...

  8. SQL内外连

    分组查询select 查询信息 from 表名where 条件group by 按照列分组(可多个 ,隔开)order by 排序方式(查询信息如果列名和聚合函数同时出现,要么在聚合函数中出现,要么就 ...

  9. ::before和::after伪元素

    伪元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染CSS的时候画上去的,所以在浏览器查看元素上是看不到伪元素的HTML结构的. before 和 after 顾名思义就是附着在元素前后的伪元 ...

  10. 如何更改Apache的根目录指向

    更改Apache的默认网站根目录地址方法如下: 0,先找到主目录下的apache文件,然后进行下面操作 1.找到 DocumentRoot “X:/Apache/htdocs” 将“X:/Apache ...