react前端路由與後端路由的差異：1、前端路由透過「react-router」中的Link標(biāo)籤來觸發(fā)，後端路由透過ajax來觸發(fā)；2、前端路由基於瀏覽器事件監(jiān)聽，而後端路由則是基於http通訊協(xié)定；3、前端路由可以實(shí)現(xiàn)局部渲染，而後端路由實(shí)作重新渲染整個(gè)頁面。

本教學(xué)操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react前端路由和後端路由的差別是什麼

後端路由的機(jī)制

懂後端的同學(xué)都知道,後端路由是後端在app.js中註冊(cè)後端路由函數(shù),前端透過ajax觸發(fā)對(duì)應(yīng)的路由回呼函數(shù)(以express為例)

觸發(fā): ajax

回應(yīng): app.get( '/router',callback)

原則: 基於http通訊協(xié)定

//app.js
app.get('/', (request, response) => {
  let ret = {
  "success": true,
  "code": 200,
  "message": "",
  "data": [],
  }
  
  response.send(ret)
})

前端路由的機(jī)制

而前端路由(指react-router )是,前端在router.js中註冊(cè)前端路由與元件映射,前端通過Link設(shè)定的路由或在瀏覽輸入對(duì)應(yīng)路由引起元件渲染:

觸發(fā): react-router中的Link標(biāo)籤

回應(yīng): 渲染Rout標(biāo)籤中對(duì)應(yīng)元件

原理: 基於瀏覽器中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"> 發(fā)布話題 </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元件會(huì)一直存在頁面中, 而Switch標(biāo)籤中的元件只會(huì)在觸發(fā)後渲染,可簡(jiǎn)單理解為未觸發(fā)元件為null,不顯示

所以形成了局部渲染

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

前端路由與後端路由的差異

前端路由基於瀏覽器事件監(jiān)聽,不透過http通訊協(xié)定

前端路由局部渲染, 後端重新渲染整個(gè)頁面,相對(duì)來說前端路由體驗(yàn)好點(diǎn)

【相關(guān)推薦：javascript影片教學(xué)、web前端】

以上是react前端路由和後端路由的差別是什麼的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！