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通讯协议

前端路由局部渲染, 后端重新渲染整个页面,相对来说前端路由体验好点

【