Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the differences between react and vue routing". In daily operation, I believe many people have doubts about the differences between react and vue routing. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the differences between react and vue routing?" Next, please follow the editor to study!

Differences: 1, react routing is the global component, vue routing is the global configuration; 2, react routing supports object and jsx syntax component configuration, vue routing only supports object configuration; 3, vue routing any component will be rendered to "", but react routing is not.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What's the difference between react and vue routing?

Generally speaking, the design ideas of the two are roughly the same, but because the corresponding frameworks are VUE and React respectively, they are used slightly differently. The focus below is to compare the differences between them.

Whether it is vue-router or react-router, their basic original intention is to implement front-end routing. The so-called front-end routing, to put it simply, means that when the url of the browser changes, it does not make a request to the server, but directly controls the front-end page to change, in order to expect the front-end to produce effects such as page jump when the function is switched.

The most basic of these, both vue-router and react-router, should provide a configuration method that allows users to * * configure the corresponding relationship between the url path and the components to be displayed * *. In this way, when a user triggers a browser url change through a page click or other means, the VUE or React system can find the corresponding VUE component or React component of the url, so as to render the component on the page.

# typical code: # vue-routerJS: ```Const Foo = {template: 'foo'} const Bar = {template:' bar'} const routes = [{path:'/ foo', component: Foo}, {path:'/ bar', component: Bar}] const router = new VueRouter ({undefined routes}) const app = new Vue ({undefined router}). $mount ('# app') ``HTML: ````Hello App!

Go to Foo Go to Bar

```# react-routerJS/JSX:``` / / modules/Foo.jsimport React from 'react'export default React.createClass ({undefined render () {undefined returnFoo}}) `/ / modules/Bar.jsimport React from' react'export default React.createClass ({undefined render () {undefined returnBar}})` / / index.js//... render (({/ * make them children of `App` * /})) Document.getElementById ('app')) `/ / modules/App.js//. Render () {undefined return (components matched by React RouterTutorial Go To Foo Go To Bar {/ * routes will be rendered here * /} {this.props.children})} /. ```

The two typical codes are actually different.

Both the root route and two custom routes seem to be implemented, but the typical react-router code used here actually uses child routes, while vue-router only uses side-by-side routes. The reason why you put these two different typical code, in fact, it is easier to compare the difference between the two.

-define the component first. The difference between how Foo components and Bar components are defined is at the syntax level of the VUE and React frameworks, which is beyond the scope of our discussion.

-after the component is defined, configure the correspondence between the url and the component. In typical code, vue-router defines a routes object, which is an array, and each object in the array represents the correspondence. The react-router definition uses JSX, which clearly expresses this correspondence and the parent-child relationship with / routing. It should be noted that the routing configuration of VUE is provided to the new VueRouter () object, which is provided when the global VUE object is initialized, while React routing needs to be configured to the global component, although react-router also provides configuration in the form of an array of objects in typical vue-router code, but ultimately the configuration is passed to. * * one is the global configuration (VUE), and the other is the global component (React), which is one of the fundamental differences between the two. * * (vue-router does not provide html configuration like JSX, it can only provide routing configuration in object mode, which is also determined by different framework systems)

-Sub-routing configuration. Vue-router does not show how to configure child routes in typical code. In fact, in terms of the use of vue-router routing components, no matter what level the routing component is, * * will be rendered to the location identified by the parent component * *. For the react-router,** root route, it is rendered to the specified location, while the child route is used as a child component, passing the children object into the parent component as a parameter, and the parent component specifies the rendering location * *. This is why vue-router does not write the parent-child relationship of the route in the typical code, while the typical code of react-router embodies the parent-child routing relationship.

# Summary of differences in use:

-vue-router is the global configuration mode, and react-router is the global component mode.

-vue-router only supports configuration in object form, while react-router supports component configuration in object form and JSX syntax.

-vue-router any routing component is rendered to the location, the react-router child component is passed into the parent component as a children, and the root component is rendered to the location.

At this point, the study on "what is the difference between react and vue routing" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.