react前端路由和后端路由的区别是什么

169 阅读 0 评论 112 点赞

我是靠谱客的博主踏实芹菜，这篇文章主要介绍react前端路由和后端路由的区别是什么，现在分享给大家，希望可以做个参考。

本教程操作环境：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)
})1
2
3
4
5
6
7
8
9
10
11
//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></Header>
          <Switch>
            <Route exact path="/" component={index} ></Route>
            <Route exact path="/topic" component={topic} ></Route>
          </Switch>
    </div>
</Router>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//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></Header>
          <Switch>
            <Route exact path="/" component={null} ></Route>
            <Route exact path="/topic" component={topic} ></Route>
          </Switch>
    </div>
</Router>1
2
3
4
5
6
7
8
9
10
//若触发前端路由'/topic',则index组件不渲染
<Router>
    <div>
      <Header/>
          <Switch>
            <Route exact path="/" component={null} />
            <Route exact path="/topic" component={topic} />
          </Switch>
    </div>
</Router>
登录后复制

前端路由和后端路由的区别

前端路由基于浏览器事件监听,不通过http通讯协议

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

【相关推荐：javascript视频教程、web前端】

以上就是react前端路由和后端路由的区别是什么的详细内容，更多请关注靠谱客其它相关文章！