react前端路由和后端路由的區別有哪些

蝸牛 互聯網技術資訊 2022-06-28 49 0

本篇內容主要講解“react前端路由和后端路由的區別有哪些”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“react前端路由和后端路由的區別有哪些”吧!

react前端路由和后端路由的區別:1、前端路由通過“react-router”中的Link標簽來觸發,后端路由通過ajax來觸發;2、前端路由基于瀏覽器事件監聽,而后端路由基于http通訊協議;3、前端路由可以實現局部渲染,而后端路由實現重新渲染整個頁面。

本教程操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react前端路由和后端路由的區別

后端路由的機制

懂后端的同學都知道,后端路由是后端在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?(
??????<Row>
??????????<Button>
+????????????<Link?to="/topic">?發布話題?</Link>
??????????</Button>
??????</Row>
????);
??}
}
//router.js
<Router>
????<div>
??????<Header/>
??????????<Switch>
????????????<Route?exact?path="/"?component={index}?/>
????????????<Route?exact?path="/topic"?component={topic}?/>
??????????</Switch>
????</div>
</Router>

在router.js中header組件會一直存在頁面中, 而Switch標簽中的組件只會在觸發后渲染,可簡單理解為未觸發組件為null,不顯示

所以形成了局部渲染

//若觸發前端路由'/topic',則index組件不渲染
<Router>
????<div>
??????<Header/>
??????????<Switch>
????????????<Route?exact?path="/"?component={null}?/>
????????????<Route?exact?path="/topic"?component={topic}?/>
??????????</Switch>
????</div>
</Router>

前端路由和后端路由的區別

前端路由基于瀏覽器事件監聽,不通過http通訊協議

前端路由局部渲染, 后端重新渲染整個頁面,相對來說前端路由體驗好點

到此,相信大家對“react前端路由和后端路由的區別有哪些”有了更深的了解,不妨來實際操作一番吧!這里是蝸牛博客網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看