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.jsapp.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.jsclass 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通訊協議
前端路由局部渲染, 後端重新渲染整個頁面,相對來說前端路由體驗好點