React 路由介绍
现代前端应用大部分都是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好，对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
前端路由的功能：用户从一个视图（页面）导航到另一个视图（页面）
前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
使用React路由简单来说，就是配置路径和组件（配对）
安装路由插件
npm add react-router-dom npm install react-router-dom@5 --save
App.js组件实现切换
步骤：
- 导入组件
import About from './components/About/About'; import Home from './components/Home/Home';
- 导入路由插件
import {Link,Route} from 'react-router-dom';
- 编写路由链接，功能是实现引起浏览器地址栏的变化
<Link className="list-group-item" to="/home">Home</Link> <Link className="list-group-item" to="/about">About</Link>
- 注册路由，实现路径到组件的映射，完成路由跳转
<Route path="/home" component={Home}></Route> <Route path="/about" component={About}></Route>
使用Router去管理Route 仅仅定义好路由还不能用，还需要路由器进行管理
使用Router(路由器)管理Route(路由)，此程序使用的是BrowserRouter
其实，路由器管理的是路由链接Link和路由Route
在index.js文件中实现路由器管理路由
1.第一步：导入路由器 BrowserRouter import {BrowserRouter} from 'react-router-dom'; 2.第二步：使用路由器包裹整个应用 <BrowserRouter> <App/> </BrowserRouter>
react路由跳转方式1: 路由标签Link跳转
<Link to="/user">跳转个人中心</Link> <br/>
react路由跳转方式2: 编程式导航跳转
<button onClick={()=>{ this.props.history.push('/about') }}>
react路由传参(3种方式)
1、params传参(刷新页面后参数不消失，参数会在地址栏显示)
路由页面：<Route path='/demo/:id' component={Demo}></Route> //注意要配置 /:id 路由跳转并传递参数： 链接方式：<Link to={'/demo/'+'6'}>XX</Link> 或：<Link to={{pathname:'/demo/'+'6'}}>XX</Link> 获取参数：this.props.match.params.id //注意这里是match而非history
2.query传参(刷新页面后参数消失)
路由页面：<Route path='/demo' component={Demo}></Route> //无需配置 路由跳转并传递参数： 链接方式：<Link to={{pathname:'/demo',query:{id:22,name:'张三'}}}>XX</Link> 获取参数： this.props.location.query.name
3.state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)
注：state 传参的方式只支持Browserrouter路由，不支持hashrouter 路由页面：<Route path='/demo' component={Demo}></Route> //无需配置 路由跳转并传递参数： 链接方式： <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link> 获取参数： this.props.location.state.name
#.history.push history.push方法更改当前路由，会向当前路由栈里面添加一条新的记录，跳转后点击回退可回退到当前页面 #.history.replace history.replace方法更改当前路由，不会向当前路由栈里面添加一条新的记录，跳转后点击回退不可回退到当前页面，与他的名字一样，是直接替换当前路由 #.history.go
#withRouter 可以加工一般组件，让一般组件具备路由所特有的 API ，withRouter 返回值是一个新组件 a. 第一步：导入withRouter函数 import {withRouter} from 'react-router-dom'; b. 第二步：使用withRouter函数将一般组件包裹出来，暴露出去、 export default withRouter(Header);
路由跳转，replace / push 区别
push: a-b-c 可以回到上一级 例： this.props.history.push('路由地址') replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面 例: this.props.history.replace('路由地址')
BrowserRouter与HashRouter的区别
底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！
备注：HashRouter可以用于解决一些路径错误相关的问题。（比如说之前提到的样式丢失问题）
axios
安装:npm add axios
npm install axios
导入axios
import axios from "axios"; axios.get("https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312") .then((res)=>{ var data = res.data.data console.log(data) console.log(data.replies) },(error)=>{ console.log('失败了') }) fetch('https://cnodejs.org/api/v1/topics').then(res=>res.json()) .then(res=>{ console.log(res.data,'fetch') }).catch(err=>{ console.log('失败了') })
ant-design(国内蚂蚁金服)
官网: https://ant.design/index-cn 安装:npm install antd --save antd基本使用(例如在app.js里面使用): 步骤: 1. 导入antd组件--Button import {Button} from "antd"; 2. 导入antd的css样式 import "antd/dist/antd.css"; <Button type="primary">我是antd里提供的按钮</Button> <br/>
总结：
以上就是 React 中路由的使用，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
