安装路由插件

npm add react-router-dom
npm install react-router-dom@5 --save

App.js 组件实现切换

步骤

1. 导入组件
import About from './components/About/About';
import Home from './components/Home/Home';
2. 导入路由插件
import {Link,Route} from 'react-router-dom';
3. 编写路由链接，功能是实现引起浏览器地址栏的变化
<Link className="list-group-item" to="/home">Home</Link>
<Link className="list-group-item" to="/about">About</Link>
4. 注册路由，实现路径到组件的映射，完成路由跳转
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>

使用 Router 去管理 Route 仅仅定义好路由还不能用，还需要路由器进行管理

1. 使用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 的区别

1. 底层原理不一样：
BrowserRouter 使用的是 H5 的 history API，不兼容 IE9 及以下版本。
HashRouter 使用的是 URL 的哈希值。
2. path 表现形式不一样
BrowserRouter 的路径中没有#,例如：localhost:3000/demo/test
HashRouter 的路径包含#,例如：localhost:3000/#/demo/test
3. 刷新后对路由 state 参数的影响
(1).BrowserRouter 没有任何影响，因为 state 保存在 history 对象中。
(2).HashRouter 刷新后会导致路由 state 参数的丢失！！！
4. 备注：HashRouter 可以用于解决一些路径错误相关的问题。（比如说之前提到的样式丢失问题）

axios

安装:npm add 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('失败了')
})

总结：
以上是本节内容，希望有帮到你，想了解更多可以看我主页，谢谢观看

最后

以上就是甜甜大雁为你收集整理的React-router与axios的详细用法安装路由插件App.js 组件实现切换步骤使用 Router 去管理 Route 仅仅定义好路由还不能用，还需要路由器进行管理react 路由传参(3 种方式)history.pushhistory.replacehistory.gowithRouter 可以加工一般组件，让一般组件具备路由所特有的 API ，withRouter 返回值是一个新组件路由跳转，replace / push 区别BrowserRouter 与 HashRouter 的区的全部内容，希望文章能够帮你解决React-router与axios的详细用法安装路由插件App.js 组件实现切换步骤使用 Router 去管理 Route 仅仅定义好路由还不能用，还需要路由器进行管理react 路由传参(3 种方式)history.pushhistory.replacehistory.gowithRouter 可以加工一般组件，让一般组件具备路由所特有的 API ，withRouter 返回值是一个新组件路由跳转，replace / push 区别BrowserRouter 与 HashRouter 的区所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。