react学习笔记

第一章React介绍
1.React是什么?
React是一个将数据渲染为HTML视图的开源JavaScript库。
（是用于构建用户界面的JavaScript库）
React通过操作DOM呈现页面。
2.React的作用
对比原生javaScript，React
3.React的引入
直接在页面的标签内追加

即可

4.React有关概念

虚拟Dom和真实Dom对象。
虚拟Dom对象比真实Dom更加节省资源，且虚拟Dom可以使真实Dom得到复用。虚拟Dom对象存在内存中，用户要观测其表达的现象则需要先通过React的方法转换成真实Dom。
容器：用于指定转换成的真实Dom对象放在哪里。
设置一个容器，容器的名字是’reactContainer1’

5.React的使用
声明虚拟Dom
const virDom=(这是一个virDom对象，并且即将被转化成realDom);
或者
const virDom2=React.createElement(‘a’,{href:‘www.baidu.cin’},‘进入百度’);
或者
const varDom3=3号虚拟对象;

将虚拟Dom转换成真实Dom，并放置于容器reactContainer1中
ReactDOM.render(virDom2,document.getElementById(“reactContainer1”));
效果：

6.jsx创建Dom
可以利用jsx语法的 被循环数组.map(循环值，循环下标)处理原始字符串数组生成虚拟Dom然后渲染（挂载到页面）。
例：
原始字符串 ：
const data2=[‘百度’,‘知乎’,‘这是一个div’];

字符串解析成虚拟Dom数组:
const Data2Excute= data2.map((item,index)=>
{
if(index<2)
return

{item}

;
else
return

{item}

;
})

渲染成真实Dom:
ReactDOM.render(Data2Excute,document.getElementById(“reactContainer1”));
效果：

注意：遍历出来的每个标签都需要有一个key属性，且每个key的值都要不一样，所以这里用{index}替代。

其它例子：

第二章react—面向组件编程

1.类式组件
类式组件的创建：
class MaComponent extends React.Component
{
//render一般是类式组件渲染到页面的最终输出
render()
{
return 百度
}
}
类式组件的渲染：
ReactDOM.render(,document.getElementById(“reactContainer1”));
效果：

注：类式组件不仅要继承React.Component类，其类名首字母还要大写，否则渲染时该组件无法被识别。

类式组件的渲染原理：

组件标签在这里指的是。
2.简单组件和复杂组件以及react中的事件绑定
“状态(state)”为空的是简单组件，“状态”不为空的是复杂组件。
状态可以用来设置组件的显示情况，如页面的管理员模式和用户模式应该也可以通过状态来实现。
状态中可以保存数据，数据的改变驱动虚拟Dom的改变，然后虚拟Dom改变真实Dom。

react事件绑定：
在

注意：该jsx代码块中onClick的参数方法不能带括号，否则事件无效，方法一加载就会执行。
3.组件实例的三大核心属性
<1>state属性
state实际上相当于一个保存多个键值对的Map集合，里面的一个键值对就是一个状态。类内部可以获取键值进行逻辑判断。

state属性运用实例：
class MaComponent extends React.Component
{
constructor(props) {
super(props);
this.state={isHot:false}

}

//render一般是类式组件渲染到页面的最终输出
render()
{
    let ihot=this.state.isHot;
    return ihot?<a href="http://baidu.com">热啊</a>:<a href="http://baidu.com">还行</a>
    // let {ishot} = this.state;
    // return <a href="http://baidu.com">{ishot?'热啊':'还行'}</a>
}

}

渲染：
ReactDOM.render(,document.getElementById(“reactContainer1”));

效果：

注意：在jsx中，方法作为值传给变量时，不能带括号。
Func1()
{
}
Const myfunc = func1;
//调用
Myfunc();
且将方法作为值传给变量后，变量是通过类调用方法，而不是通过实例调用方法，因而this对象会变成“未定义”
Eg:
const Ps = new MaComponent();
const f=Ps.func2;
f();
F()执行结果：

问题出现的原因就是默认开启的局部严格模式。
这个问题可以通过在类构造器中设置一行语句将this绑定到该方法中：
this.func2=this.func2.bind(this);
推测这个语句的功能是：在创建了实例之后，就把该实例（this）附加到类级别的func2()方法上，以后每次执行的时候，调用的func2都会传入这个实例(this)，所以不为空了。
完整代码：
class MaComponent extends React.Component
{
constructor(props) {
super(props);
this.state={isHot:false}
this.func2=this.func2.bind(this);

}

//render一般是类式组件渲染到页面的最终输出
render()
{

    let ihot=this.state.isHot;
    return ihot?<a href="http://baidu.com">热啊</a>:<a href="http://baidu.com">还行</a>
    // let {ishot} = this.state;
    // return <a href="http://baidu.com">{ishot?'热啊':'还行'}</a>
}
func2()
{
    alert(this);
}

}
const Ps = new MaComponent();
const f=Ps.func2;
f();

Bind()方法返回的是一个函数。
补充：js严格模式
use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。

jsx的类中的方法默认开启了局部严格模式（局部是指只在方法中生效）
局部严格模式开启方法： 直接使用’use strict’语句

1】状态的更新
状态更新使用setState方法，每次状态更新（执行setState方法后），render方法（不管是类里面的还是外部的用于渲染的）都会重新执行一次，所以一般页面显示情况也会更新。使用setState方法更新state后可能不会立即看到更新后的效果，这是正常的。
this.setState({isHot:!isHot},()=>
{
alert(this.state.isHot);
});
()=>{}是方法执行后的回调函数，可以不加。
2】关于state的简化写法
第一个：
我们知道在jsx中用func1(){}这种格式直接定义在类里面的方法，如果没有在构造方法里面绑定this的话，类里面定义的事件就通过其调用的方法访问到this。但是频繁的写绑定语句又很麻烦。这里有一个简化写法用于解决这个问题，那就是定义方法用箭头函数，而不是前面的那种格式。
Eg:
changeWealther = ()=>
{
}
箭头函数和一般函数最大的区别就是箭头函数没有自己的this，它会在它的外层函数中寻找this。这个外层函数是程序流程意义上的。
比如说，在方法render中
render()
{

const {isHot}=this.state; //{isHot}的含义是从this.status中获取key为isHot的键值对的值，变量名为isHot.
return <div onClick={this.changeWealther}>今天天气很{isHot?'炎热':'凉爽'}</div>;

}

这里changeWealther函数的外层函数就是render()，所以此时直接使用render()的this参数。
使用这种方式就不需要再在构造器中写绑定语句了。

第二个：
类的成员变量可以直接声明，如果该变量不需要改变，则可以写在构造函数之外。
Eg:
class Person
{
gender=‘男’;
constructor(name,age) {
this.name=name;
this.age=age;
}
}

<2>props属性
jsx中定义的类继承了React.Component之后，就有了一个内置属性props。
这个内置属性用于接收外部传来的各种键值对，不管类内部是否定义，都能接收。props的使用也能减少构造器的代码编写，减少代码行数。
Eg:
方法：
class Person extends React.Component
{
render() {
const {name, age, gender} = this.props;
return

• {name}
• {age}
• {gender}

}
}
//渲染
const oneperson={name:‘张三’,age:‘16’,gender:‘男’}
ReactDOM.render(<Person {…oneperson}/>,document.getElementById(“testprops”))

其中{…oneperson}代表传入oneperson所有键值对。“…”是展开运算符，在这里用来批量传送。
也可以写成：
ReactDOM.render(<Person {oneperson.age}/>,document.getElementById(“testprops”))
或者
ReactDOM.render(,document.getElementById(“testprops”))
或者
ReactDOM.render(,document.getElementById(“testprops”))

利用
补充：展开运算符“…”
“…”可以用来展开数组，

结果就是

展开运算符也可以用来批量接收数据。在js函数中…用于接收参数时，此时的参数名就成了数组

这个时候Number变量就是数组。

展开运算符无法展开对象。但是，在jsx中，“…oneperson”无法展开oneperson对象，而{…oneperson}却可以，这算是js中的一个新语法。在原生js中，带{}符号能解析的原因是因为{}将对象复制成了一个字面量，而jsx中不是因为复制成字面量，单纯是jsx引入的包支持它用…解析对象，且jsx这种用法仅限于在标签属性的传递中使用。
jsx中还可以利用展开运算符修改属性
const oneperson1={…oneperson,name:‘李四’}
修改oneperson中name属性的值为“李四”。

a)引入prop-types之后，可以对props的入参类型作限制。

限制关键词: .propTypes
Eg:

如果有入参名字为name,则其值必须为string类型，否则会出现警告（不会报错）。
其次:
Name:ProTypes.string.isRequired表示name属性必须传，否则警告。
.defaultProps传默认值

（其中ProTypes.func表示函数类型）
注意：props是只读的不可修改。
b)props简写方式

c)类式组件中props与构造器的关系

实际开发一般不写构造器，所以默认接收props
d)函数组件使用props

<3>refs属性，以及事务处理
（1）字符串形式的ref
字符串形式的ref在jsx类的标签中定义：
Eg:

在jsx中的标签如果定义一个ref属性,值为Input1，那么在这个jsx类中就可以通过其实例this.refs.input获取到该标签的真实Dom。相当于js中通过ID获取一个对象。
This.refs这个内置对象中保存真实Dom的格式也是{ref名:对应的真实Dom,ref名2:对应的真实Dom2}.。

字符串形式的ref不被官方推荐使用，react官方表示这种形式的ref很可能会在某次更新中直接淘汰。

（2）回调形式的ref
回调函数一般是通过箭头函数来定义。
回调函数的定义方式
<input ref={()=>{}}>
传入当前input节点作为入参，并添加为this的属性input1，值为a(即当前节点，只要传入参数就是调用这个回调函数的节点，不管名字是a还是其他的效果都一样)
<input ref={(a)=>{this.input1=a}}
接收传递的参数:
直接在类的方法中使用this.input1就可以获取。

回调函数还有个精简写法：

Ref={c=> this.input1=c}
=>前的c是入参，为当前节点，=>后的this.input1=c是赋值语句，多个语句用分号隔开。
完整代码：

设计思想就是在回调函数触发后this实例中就有了对应的属性，可以获取到值，这样就解决了jsx事件触发时参数传递的问题。不过参数传递直接在onClick设置也可以。

补充：state直接赋值

关于ref回调函数调用次数的说明：
（3）createRef创建ref容器
Eg:
MyRef=React.createRef();
React.createRef调用后可以返回一个ref容器，该容器可以用来保存被ref标志的标签。
且一个ref容器只能保存一个标签，对同一个容器多次赋值后者覆盖前者。
类中使用
this.myref1.current
访问这个对象。
完整代码：
class Dog extends React.Component
{
myref1 =React.createRef();
getref=()=>
{
alert(this.myref1.current);
}
render()
{
return (
123
);
}
}
结果：

（4）事务处理
一般来说要尽量避免过度使用refs（好像是因为会出现什么问题），而ref作用主要是在传递参数。
当事件中的方法要使用到的数据在事件发起的标签中时，可以不用ref就实现参数传递。(发生事件的元素就是要操作的元素的时候，可以不必使用ref)
因为在jsx中如果通过事件调用类中方法，会默认传入一个event属性，该event属性的子属性target保存了发起该事件的标签Dom，所以可以直接操作event.target来获取事件发起者DOM的信息。
Eg:
class Dog extends React.Component
{
myref1 =React.createRef();
getref=(even)=>
{
alert(event.target);
// alert(this.myref1.current);
}
render()
{
return (
123
);
}
}
Getref=(even)=>{}中的”even”可以加也可以不加。
其中的event.target就是一个DOM类型。

补充：
const{name,age}=this;
含义：定义两个变量，名字分别是name和age，从this中找出两个名字分别为name何age的属性，并将他们的值赋给名字相同的变量。
jsx中定义的变量不直接获取，而通过{}符号获取。
4.非受控组件
例子：

class FormTest extends React.Component {

handleSubmit=()=>
{
const {name,age}=this;

alert(`名字:${name.value},年龄:${age.value}`);
alert("名字:${name.value},年龄:${age.value}");
}
render()
{
    return (
        <form onSubmit={this.handleSubmit}>
            <input ref={c=>this.name=c} type="text" name="name" /><br />
            <input ref={c=>this.age=c} type="text" name="age" /><br />
            <button>提交</button>
        </form>
    );
}

}

这里设置了onsubmit之后不需要再设置submit类型的框了，单纯一个button就可以实现提交。
在jsx方法中DOM值的获取是用$DOM名.value来获取，以上constname,age命名后的name和age实际上就是就是真实DOM。补充：键盘tap上面的单引号“‘”和键盘分号右边的单引号或者双引号的区别：tap上面的单引号‘‘里面的代码会解析特殊字符，而键盘分号右边的单引号或者双引号不会。如alert(‘名字:${name.value},年龄:$age.value‘);alert("名字:${name.value},年龄:$age.value");中，上面的$被解析了，而下面的$单纯是字符串的一部分。
5.受控组件
受控组件和非受控的区别就在于受控组件将组件中所有的输入类DOM都保存到State里面，然后需要用到的时候从state里面取。受控组件相比非受控组件的优势之一在于受控组件很少需要用到refs。

Eg:
class TestForm1 extends React.Component
{
state = {age:’’,name:’’}
changName=(event)=>
{
this.setState({name:event.target.value});
}
changeAge=(event)=>
{
this.setState({age:event.target.value});
}
handleSubmit=(event)=>
{
event.preventDefault();//阻止表单提交
const {name,age} =this.state;
const p=name;
alert(您的姓名是:${p},您的年龄是${age});

}
render()
{
    return (
        <form onSubmit={this.handleSubmit}>
            <input onChange={this.changName} type="text" name="name" /><br />
            <input  onChange={this.changeAge} type="text" name="age" /><br />
            <button>提交</button>
        </form>
    );

}
}

注：jsx是大小写敏感的，要特别注意，已经在大小写上踩不少雷了。
还有对于代码
const {name,age} =this.state;
alert(“您的姓名:”+{name}+",您的年龄:"+{age});
是输出不了值的。关于js和jsx的花括号有什么用还不太清楚还得再研究一下。
event.preventDefault();//阻止表单提交
Event.preventDefault()方法可以防止form提交后页面跳转到action对应的页面中。
6.组件生命周期
<1>高阶函数
高阶函数的定义：

函数的柯里化：

实例解析1：
函数：
changName=(event)=>
{
this.setState({name:event.target.value});
}

调用：

已经知道了对于jsx的事件绑定一个函数时，如果不加入参，则入参默认是本标签的Dom对象，不管changName=(event)=>{}中给该Dom取名是不是event，这个对象都是调用函数的触发事件的标签的DOM对象。
比如以上函数还和下面的等价：
changName=(ss)=>
{
this.setState({name:ss.target.value});
}
ss也是事件所在标签的Dom对象。

注意：jsx类名首字母需要大写。
补充：回调函数就是作为一个参数的函数，比如果const a=()=>{}.等号后面的函数作为一个参数赋给了a，所以这个函数就是回调函数。
符号“[]”可以用来读取js变量的值.
Eg:

结果是[a]把变量a的值读出来了，obj对象多了一行数据{‘name’:’tom’};

实例解析2：
class TestHFUNC extends React.Component
{
func1=(na)=>
{
alert(na);

    return ()=>{
     alert("啊啊啊");
    }

}
render()
{
    return <button onClick={this.func1('name')}>巴腾1</button>
}

}
onClick绑定的函数如果不带有参数，那这个函数就是相当于一个逻辑视图，onclick会根据视图名找到类中对应的函数并绑定；但如果带了参数，这个函数就是一个表达式，代码加载的时候就会执行，最终onclick绑定的是这个表达式（即函数）的返回值，如果返回值是函数，则成功绑定，否则绑定失败。这里的func1(‘name’)其返回值是函数类型，所以它也是一个高阶函数。
最终button标签的效果是，在加载后alert输出’name’，后面点击不再alert’name’，而是alert啊啊啊，即只执行return的函数了。
而如果将其从表达式变成函数就可以执行函数体而非只执行return语句了。
如下：
return <button onClick={()=>{this.func1(‘name’)}}>巴腾1

实例解析3（用[]读取变量）

<2>柯里化
略
<3>组件的生命周期（重要）
组件生命周期有关的三个函数以及其执行时机
constructor()构造函数:在组件被创建出来后调用一次
componentDidtMount();只在组件在页面挂载（渲染）完毕后执行一次（在第一次执行ReactDOM.render()方法后，组件就已经被挂在了，后面状态修改并不是重新挂载，因而不会重复执行componentDidMount方法）
render()方法:每次组件状态(state)改变时都执行一次，组件创建时也会执行一次。

(1)组件生命周期的理解

(2)React组件一些自带的钩子函数（回调函数）
componentDidMount():组件挂载完毕后执行一次
componentWillUnmount():组件卸载之前执行一次
render();组件初始化渲染、状态更新后执行
componentWillMount():组件将要挂载的时候执行一次
shouldComponentUpdate():控制组件更新的阀门(必须有布尔类型返回值，返回true则组件需要更新，false则组件不更新，默认为true)
componentWillUpdate():组件更新前执行一次。

（3）react组件生命周期流程图（旧）

根据流程图来看，使用setState()方法后，会调用当前组件类的shouldComponentUpdate方法来判断是否需要更新组件，如果shouldComponentUpdate返回true则更新组件，返回false则不更新。sholdComponentUpdate函数不写的话默认返回true。
而使用forceUpdate()强制更新时，不需要通过componentWillUpdate判断直接就可以要求更新组件。

（图中的death和force不是内置方法，是供事件使用的自定义方法。）

（4）react生命周期流程图（新）

react新版本的的生命流程和旧版本相比，有三个方法即将废弃，替换成了对应的UNSAFE_方法:

ComponentWillMount——————UNSAFE_componentWillMount
componentWillReceiveProps——————UNSAFE_componentWillReceiveProps
componentWillUpdate——————UNSAFE_componentWillUpdate

新生命周期的其他内容暂略。

补充：jsx类中style等属性需要用双花括号来修饰。
卸载组件方法：ReactDOM.unmountComponentAtNode(document.getElementById(‘test’));

第三章react脚手架
1.react脚手架介绍
<1>react脚手架是什么

<2>react脚手架安装和创建流程

脚手架略

第四章react路由
1.路由的介绍？
路由是一种映射关系，key为路径

2.前端路由的基石history.js（React路由原理）
React实现地址栏改变页面不跳转且更新组件用的是Link标签，这里讲的只是它实现的底层原理。Link底层就是history。

react路由需要路径改变的同时页面不跳转（react会自动监测地址栏的改变然后自动选择要显示的组件），所以先要介绍如何使用History.js实现这个功能。
<1>history.js引入
History.js链接：
https://cdn.bootcss.com/history/4.7.2/history.js
<2>history的使用
实现地址栏改变而页面不跳转的方法（js代码中）：
History.createBrowserHistory()方法用于新建当前浏览器的历史记录对象。

（1）replace()方法，地址栏修改页面不跳转
History.createBrowserHistory().replace(path)
（2）put()方法，地址栏修改页面不跳转
History.createBrowserHistory().put(path)
以上两个方法用法差不多.
Eg:
地址栏原地址:http://localhost:3000/profile
执行方法put(‘/hello’)后，地址栏变为:http://localhost:3000/hello
（3）goBack()方法，地址栏回退一次而页面不跳转
History.createBrowserHistory().goBack()
（4）goForward()方法，地址栏前进一次而页面不跳转
History.createBrowserHistory().goForward()
相关的方法:
History.createBrowserHistory().listen()，js监听当前地址栏的变化

Eg:

push profile replace user 回退 => 前进 =>

history.listen ((location => {
console.log(“路径改变了”);
}))

History.createBrowserHistory()的replace方法和put方法都可以实现跳转，查了网上的资料说是replace跳转的页面不会加入history浏览器历史记录，无法返回，而put会加入。但实际用起来我发现好像都能返回，不知道到底是怎么回事。先主要用put。
https://www.php.cn/js-tutorial-467089.html

3.路由的使用
history用来使浏览器地址栏改变而浏览器内容不变，这样react能监测到地址栏的改变并对相应内容进行修改。
react路由的标签主要有三个, 以及
其中，LInk和Route是同级标签，且都是Router的子标签。
Router用于声明一个路由器，一个路由器里面有多个路由(Route)和连接（Link）。
Route用于注册一个路由，说明哪个路径对应哪个组件。
Link和Route是一一对应的，一个Link的to属性值对应一个Route的path属性值，Link用于提供一个展示给用户的可以点击的按钮，点击后可以转到对应Route的组件。
Eg:
import React from ‘react’;

import Home from ‘./…/testjs/Home’;
import Profile from ‘./…/testjs/Profile’;
import User from ‘./…/testjs/User’;

import {BrowserRouter as Router, Link, Route} from “react-router-dom”;
function router(){
return (

    <Router>
        <Route path="/home" component={Home} />
        <Route path="/profile" component={Profile} />
        <Route path="/user" component={User}  />
        <ul>
            <li><Link  to="/user">user</Link></li>
            <li><Link to="/profile">profile</Link></li>
            <li><Link to="/home">home</Link></li>
        </ul>
    </Router>);

}

export default router;
效果：

<1>路由的引入

<2>路由的建立
IndexRouter.js
import React from ‘react’;

import Home from ‘./…/testjs/Home’;
import Profile from ‘./…/testjs/Profile’;
import User from ‘./…/testjs/User’;

import {BrowserRouter as Router, Link, Route} from “react-router-dom”;
function router(){
return (

    <Router>
        <Route path="/home" component={Home} />
        <Route path="/profile" component={Profile} />
        <Route path="/user" component={User}  />
        <ul>
            <li><Link  to="/user">user</Link></li>
            <li><Link to="/profile">profile</Link></li>
            <li><Link to="/home">home</Link></li>
        </ul>
    </Router>);

}

export default router;

<3>在App.js引入路由
import React,{ Component }from ‘react’
import IndexRouter from “./Router/IndexRouter”
class App extends Component {
render()
{
return(

)
}
}
export default App;
<4>这样就可以了，index.js可能很少会修改，主要应该是改App.js

http://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html

第五章一些实例展示

新闻查询
import react,{Component} from “react”;
import { Input,Button } from ‘antd’
import ReactDOM from ‘react-dom’;
export default class Query extends Component
{

queryNews=()=>
{

    const queryKey=document.getElementById("queryInput").value;
    const url="http://localhost:8080/data/query_poadb_news_data_react?key="+queryKey;
    const query={"key":queryKey}
    fetch(url, {
        body: `keys=123`,
        headers: {
            'content-type': 'application/json',

        },
        method: 'POST',
    }).then(function (response) {
        return response.json();
    }).then(function (data){
        // console.log(data)
        // {
        //     data.map((item, index) => {
        //         console.log(index + "号数据:" + item.news_title)
        //     })
        // }
        ReactDOM.render((
            <div>
                {
                    data.map((item,index)=>{
                    return <div>{item.news_title}</div>
                })
                }
            </div>
        ),document.getElementById("container1"))

    })


}
queryResultShow=(data)=> {

    ReactDOM.render((
        data.map((item, index) => {
            <div>{item.news_title}</div>
            console.log(index + "号数据:" + item.news_title)
        })


    ),document.getElementById("container1"))
}



render()
{
    return(<table width="100%">
        <tbody>
        <tr><td width="100%" height="50px" align="center">查询关键词:<Input id="queryInput" size="large" name="querykey" style={{ width: '40%' }}/><br /><Button onClick={this.queryNews}>提交</Button></td></tr>
        <tr><td width="100%" align="center"><div id="container1">子容器</div></td></tr>
        </tbody>

    </table>)
};

}

路由设置：
import React, {Component} from ‘react’;
import { Menu } from ‘antd’;
import ‘antd/dist/antd.css’;
import {BrowserRouter as Router, Link, Route} from “react-router-dom”;
import Display from “…/Menu/Display”;
import Query from “…/Menu/Query”;
import Home from “…/Menu/Home”;
import UserHome from “…/Menu/UserHome”;
import { Loading3QuartersOutlined } from ‘@ant-design/icons’;
import { Typography } from ‘antd’
const { Title } =Typography;
// function router(){
// return (
//

//
//
//
//
//
//
//
// 主页
// 查询
// 个人中心
// 展示
//
//
// {/ /}
// {/* <Menu.Item></Menu.Item> /}
// {/ <Menu.Item></Menu.Item> /}
// {/ <Menu.Item></Menu.Item> /}
// {/ <Menu.Item></Menu.Item> /}
// {/ */}
//
//
//

)
//
// }
//
// export default router;
export default class IndexRouter extends Component
{
render() {
return (

    <div>
         <Router>
             <Route path="/home" component={Home} />
             <Route path="/query" component={Query} />
             <Route path="/userhome" component={UserHome} />
             <Route path="/display" component={Display} />
             <Link to="/home" ><Title level={4}>主页</Title></Link><br />
             <Link to="/query" ><Title level={4}>查询</Title></Link> <br />
             <Link to="/userhome" ><Title level={4}>个人中心</Title></Link><br />
             <Link to="/display" ><Title level={4}>展示</Title></Link><br />
         </Router>
         {/*<Menu>*/}
         {/*    <Menu.Item></Menu.Item>*/}
         {/*    <Menu.Item></Menu.Item>*/}
         {/*    <Menu.Item></Menu.Item>*/}
         {/*    <Menu.Item></Menu.Item>*/}
         {/*</Menu>*/}

    </div>)
}

}