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通訊協議

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

【