react-router 路由
安装
npm install react-router-dom --save
引用
import { BrowserRouter, Route, Link，Redirect，withRouter } from 'react-router-dom';
BrowserRouter ===>> 定义一个路由(只能有一个子元素) Route ===>> 路由项 Link（使用to属性跳转） ===>> 跳转标签
Redirect to='url' ===>> 重定向属性，场景：如果客户是vip，跳到vip页，否则重定向回首页
withRouter ===>> 使用：export default withRouter（组件名）没有配置路由项，但想使用路由项的功能时使用，例如跳转页面，功能可以输出this.props.history查看
小结
Redirect：用户访问一个路由，会自动跳转到另一个路由，例如用户访问的页面不存在，就可以重定向到另一个页面。
withRouter,：作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中。
Link：允许用户点击后跳转到另一个路由
实现跳转页面时传递参数
1、可以直接在路径后面加‘？’，然后写上参数（如to='/list?a=123'），但是这种方法获取参数比较麻烦；
2、也可以使用如下形式
（1）直接在跳转的路径后面加上一个‘/’，然后在后面写参数：(一般用在，点击对应链接跳转到对应页面详情，点击时传递这个页面的ID，List页面根据ID渲染对应页面详情)
（2）想要接收到参数，可以在index.js中的路由进行如下配置：
3、之后在路由list组件的render中，使用如下代码即可打印出接收到的参数：console.log(this.props.match.params.id);
4、list页面拿到点击的对应ID后，把id发送给后台接口（也就是aixos请求数据的地址加上ID）让接口返回对应的数据
5、最后还有一个问题，因为axios是在组件挂载完成的生命函数中请求的，所以当我们点击不同按钮，组件并没有重新挂载，所以不会触发axios请求，那页面就不会变化了。这时就需要用到另一个生命周期函数：componentWillReceiveProps，props数据发生改变执行的函数，把axios请求复制一份到这个函数里面，这时我们点击按钮获取到的ID值改变了，也就是props数据改变了，就会触发函数发送axios请求。componentWillReceiveProps函数可以接收一个参数nextProps对象，nextProps.match.params.id可以拿到id值，并声明一个id变量去存放id值，然后在函数里面的axios请求的url路径加上?id= + id就可以了
新闻项目 — 登录功能
步骤一、获取登录状态
发送ajax请求，请求的是登录状态接口，为了验证用户的登录状态（第一次ajax）在state中定义一个login变量，存放从接口获取过来的ture或false，表示用户有没有登录，初始值先设为false，然后挂载页面成功后的函数中再ajax获取接口数据替换
步骤二、定义按钮文本：
用接口返回的true/false的login变量判断，没有登录时，按钮显示登录，登录了显示退出
步骤三、登录模态框：
点击登录按钮后出现模态框，可以利用antd库完成，然后用户密码的input输入框也是用antd库
步骤四、登录功能实现：
① 存放用户名与密码：输入用户名密码后，点OK按钮，先在state定义两个变量存放数据，input框的value绑定到变量中，然后绑定onChange事件，把输入的value值赋给state中的用户名变量
② 发送用户名与密码到后台校验：给OK按钮绑定点击事件，点击时发送ajax请求，为了验证用户的用户密码（第二次ajax），把用户名和密码跟在url后传过去后台，会返回一个login为true或false（看后端放哪）判断是否正确，就可以根据返回的布尔值提示登录成功或失败，提示框采用antd库的全局提示。并且让模态框隐藏，登录按钮改为退出
③ 服务器接收用户名与密码的cookies跨域问题：正确输入密码登录后，登录状态没有保存，涉及到cookies的跨域问题，和后端沟通？在ajax请求后面多加一个参数，｛withCredentials：true｝后台就可以拿到cookie了
步骤五、退出功能实现：
在退出的按钮绑定点击事件，发送ajax请求，具体接口看后端，一般返回一个logout：true，就判断如果是true，在.then中修改state中用于判断登录状态的login数据为false，登录按钮就自动变成登录文本了（第三次ajax）
登录后才能观看vip页面的功能实现
步骤一、查看用户登录状态
在componentDidMount中发送ajax请求用户的登录状态，并定义login存放数据
步骤二、根据登录状态显示页面
如果用户登录了，可以进入vip页面，否则自动跳转到首页，用获取到的登录状态去判断。跳转回首页可以使用路由中的Redirect to='url'重定向，细节点（1）用户登录状态需要设置默认值为true，如果默认是false的话，因为render是挂载页面函数，而发送ajax请求登录状态是在挂载完成后进行，这时就会直接取了false的值，不管是否登录都会直接重定向到首页
解决方法：所以用户状态默认值设置为true
细节点（2）登录状态默认值设为true又会有一个问题，render看到是true，自动先跳到vip页，然后执行到componentDidMount函数中，看到ajax返回用户未登录，又重定向回首页，会导致用户有一瞬间是可以看到vip页的
解决方法：再设置一个fetchFinish变量默认为false，在用户已登录的逻辑中再加一层判断，如果这个变量也是为true，再显示vip页面，否则显示'正在判断用户登录状态'，然后在componentDidMount函数中，发送ajax请求改变login登录状态的同时，把fetchFinish这个变量设为true（一直为true就可以了）