13518219792
本篇内容主要讲解“react前端路由和后端路由的区别有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react前端路由和后端路由的区别有哪些”吧!
创新互联公司欢迎联系：13518219792，为您提供成都网站建设网页设计及定制高端网站建设服务，创新互联公司网页制作领域十余年，包括成都除甲醛等多个方面拥有多年的网站运维经验，选择创新互联公司，为网站锦上添花。
react前端路由和后端路由的区别：1、前端路由通过“react-router”中的Link标签来触发，后端路由通过ajax来触发；2、前端路由基于浏览器事件监听，而后端路由基于http通讯协议；3、前端路由可以实现局部渲染，而后端路由实现重新渲染整个页面。
本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。
后端路由的机制
懂后端的同学都知道,后端路由是后端在app.js中注册后端路由函数,前端通过ajax触发相应的路由回调函数(以express为例)
触发: ajax
响应: app.get('/router',callback)
原理: 基于http通讯协议
//app.js
app.get('/', (request, response) => {
let ret = {
"success": true,
"code": 200,
"message": "",
"data": [],
}
response.send(ret)
})前端路由的机制
而前端路由(指react-router)是,前端在router.js中注册前端路由与组件映射,前端通过Link设置的路由或在浏览输入相应路由引起组件渲染:
触发: react-router中的Link标签
响应: 渲染Rout标签中对应组件
原理: 基于浏览器中hash(React-Router v2之前),history(React-Router v4)
//index.js
class ListContent extends Component {
constructor(props){
super(props);
this.state = {
}
}
render() {
return (
);
}
}
//router.js
在router.js中header组件会一直存在页面中, 而Switch标签中的组件只会在触发后渲染,可简单理解为未触发组件为null,不显示
所以形成了局部渲染
