第一种: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. shell脚本实例-内存磁盘使用警告

    1,磁盘使用警告并发送邮件 #!usr/bin/bash #df -Th|grep '/$' 这个是获取内存使用的那一条记录 #后面两句是获取内存的使用率 disk=`df -Th|grep '/$' ...

  2. python之pandas简单介绍及使用(一)

    python之pandas简单介绍及使用(一) 一. Pandas简介1.Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据 ...

  3. SpringBoot 添加fastjson

    1.先在项目中添加fastjson依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId> ...

  4. 堆&栈

    Java内存分为两种:堆内存和栈内存. 一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当超过变量的作用域后,java会自动释放掉为该变量分配的内存空间.堆内存用于存放由new创建的对象和 ...

  5. hadoop day 2

    1.hdfs shell相关命令 #hadoop fs -ls / 查看HDFS根目录 #hadoop fs -mkdir /test 在根目录创建一个目录test #hadoop fs -mkdir ...

  6. 笔记本1050ti显卡安装最新驱动版本 (415.27) 记录 NVIDIA显卡GeForce系列 (Ubuntu18.04)

    在Linux上安装驱动,这事情多半是跑CUDA程序的人才会搞的,多年前学CUDA时为这一步骤头疼的很,现如今已经比较熟悉了,今日给出一些记录. 首先,在NVIDIA官方网站上找到驱动下载页面: htt ...

  7. 阿里云CentOS中vsftp安装、配置、卸载

    1--卸载 查看当前服务器中的vsftpdrpm -qa|grep vsftpd 例如结果为:vsftpd-2.2.2-13.el6_6.1.x86_64执行卸载rpm -e vsftpd-2.2.2 ...

  8. Go unitest

    待测试: // add.go package util func Add(a int, b int) int { return a + b} 使用gotests工具,自动生成测试用例框架: https ...

  9. 【leetcode】21-MergeTwoSortedLists

    problem MergeTwoSortedLists 一种方法是迭代,一种方法是递归: code /** * Definition for singly-linked list. * struct ...

  10. 【opencv基础】imwrite函数与图像存储质量

    前言 std::vector<int> compression_params; compression_params.push_back(CV_IMWRITE_JPEG_QUALITY); ...