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 ...
随机推荐
- day 96 关于分页的使用
分页的学习主要四步骤 from django.db import models # Create your models here. class Book(models.Model): title = ...
- c#继承中的函数调用实例
using System; namespace Test { public class Base { public void Print() { ...
- HDU 6090 17多校5 Rikka with Graph(思维简单题)
Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...
- 大数据-04-Hbase入门
本文主要来自于 http://dblab.xmu.edu.cn/blog/install-hbase/ 谢谢原作者 本指南介绍了HBase,并详细指引读者安装HBase. 前面第二章学习指南已经指导大 ...
- html 调用ocx控件
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
- python 实现 KNN 分类器——手写识别
1 算法概述 1.1 优劣 优点:进度高,对异常值不敏感,无数据输入假定 缺点:计算复杂度高,空间复杂度高 应用:主要用于文本分类,相似推荐 适用数据范围:数值型和标称型 1.2 算法伪代码 (1)计 ...
- 【转载】 强化学习(三)用动态规划(DP)求解
原文地址: https://www.cnblogs.com/pinard/p/9463815.html ------------------------------------------------ ...
- parson json解析
最近交互数据中用到JSON数据,很多年以前用过CJSON解析和生成JSON数据,貌似CJSON已经发展成为了libjson,本打算用libjson库,不过其提供的解析JSON方式采用了回调,是测试过程 ...
- Android强制横屏+全屏的几种常用方法
全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 1 requestWindowFeature(Window.FEATURE_NO_ ...
- ccf-170902-公共钥匙盒(模拟)
这是一道典型的模拟题 首先我们把借钥匙和还钥匙切分成两个事件 保存于两个数组中 然后我对还钥匙的活动按照时间发生次序和还得钥匙序号排序,即按照题意对事件发生的次序排序 最后按照时间的进行 一个一个进行 ...