第一种: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. python-局部变量和全局变量

    name = "feifei" def change_name(name): print("before change name:%s" % name) nam ...

  2. 新建oracle数据库表空间及删除表空间和用户

    进入oracle的命令控制台,按具体情况执行以下命令: sqlplus 默认数据库普通用户登录sqlplus / as sysdba 默认数据库管理员登录sqlplus username/passwo ...

  3. Oval框架如何校验枚举类型的一种思路

    前言: Oval校验框架被广泛集成于各类接口参数校验中, 其方便的注解语法, 易读性和扩展性. 几乎成了java后端服务代码的标配. 有人会很疑惑, 都已经是枚举类型了, 还需要校验吗? 其实这边更确 ...

  4. memoization

    memoization 是指通过缓存函数返回结果来加速函数调用的一种技术.仅当函数是纯函数 时结果才可以被缓存,也就是说,函数不能有任何副作用或输出,也不能依赖任何全局状态 import math _ ...

  5. [LeetCode&Python] Problem 905: Sort Array By Parity

    Given an array A of non-negative integers, return an array consisting of all the even elements of A, ...

  6. linux 的IP配置和网络问题的排查

    1.6  IP的配制, 首先要会用: ifconfig  和加相关参数如: ifconfig -a, 来查看,自己的电脑网络配制. 再次就必需要知道,默认IP配制文件的地方: cd /etc/sysc ...

  7. Web安全 概述

    转载自 “余弦”大牛的评论 https://www.zhihu.com/question/21606800 大牛的个人blog:http://evilcos.me/ 作者:余弦链接:https://w ...

  8. hdu1358 Period KMP

    给出一个字符串,找出所有可以作为它循环节的子串长度 利用kmp的失配数组的性质,可以直接做 #include<stdio.h> #include<string.h> ; cha ...

  9. Java中final的用法总结

    1.         修饰基础数据成员的final 这是final的主要用途,其含义相当于C/C++的const,即该成员被修饰为常量,意味着不可修改.如java.lang.Math类中的PI和E是f ...

  10. LeetCode - Number of Recent Calls

    Write a class RecentCounter to count recent requests. It has only one method: ping(int t), where t r ...