What is the difference between react and vue routing?

Difference: 1. React routing is a global component method, and vue routing is a global configuration method; 2. React routing supports object and jsx syntax component form configuration, while vue routing only supports object form configuration; 3. vue routing Any component will be rendered to "99ae171a883fff6fa2f384572360bc0a", but react routing is not.

The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.

What is the difference between react and vue routing

In general, the design concepts of the two are roughly the same, but because the corresponding frameworks are VUE and React, their usage methods are slightly different. There are some subtle differences. The focus below is to compare their differences.

Whether it is vue-router or react-router, their most basic original intention is to implement front-end routing. The so-called front-end routing, simply put, means that when the browser URL 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 similar page jumps when switching functions, for example.

The most basic thing here, whether it is vue-router or react-router, must provide a configuration method so that users can **configure the corresponding relationship between the url path and the component to be displayed* *. In this way, when the user triggers a change in the browser URL through page clicks or other methods, the VUE or React system can find the VUE component or React component corresponding to the URL, and thus render the component on the page in a targeted manner.

##### 典型代码：
###### vue-router
JS:
```
const Foo = { template: &#39;<div>foo</div>&#39; }
const Bar = { template: &#39;<div>bar</div>&#39; }
const routes = [
  { path: &#39;/foo&#39;, component: Foo },
  { path: &#39;/bar&#39;, component: Bar }
]
const router = new VueRouter({undefined
  routes
})
const app = new Vue({undefined
  router
}).$mount(&#39;#app&#39;)
```
HTML:
```
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-linkto="/foo">Go to Foo</router-link>
    <router-linkto="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口-->
  <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>
```
###### react-router
JS/JSX:
```
// modules/Foo.js
import React from &#39;react&#39;
export default React.createClass({undefined
  render() {undefined
    return<div>Foo</div>
  }
})
```
```
// modules/Bar.js
import React from &#39;react&#39;
export default React.createClass({undefined
  render() {undefined
    return<div>Bar</div>
  }
})
```
```
// index.js
// ...
render((
  <Routerhistory={hashHistory}>
    <Route path="/"component={App}>
      {/* make them children of `App`*/}
      <Route path="/foo"component={Foo}/>
      <Route path="/bar"component={Bar}/>
    </Route>
  </Router>
), document.getElementById(&#39;app&#39;))
```
```
// modules/App.js
// ...
  render() {undefined
    return (
      <div>
        <h1>React RouterTutorial</h1>
        <ulrole="nav">
          <li><Linkto="/foo">Go To Foo</Link></li>
          <li><Linkto="/bar">Go To Bar</Link></li>
        </ul>
        {/* 路由匹配到的组件将渲染在这里 */}
        {this.props.children}
      </div>
    )
  }
// ...
```

The two typical codes are actually different.

It seems that the root route and two custom routes are implemented, but the typical code of react-router used here actually uses sub-routing, while vue-router only uses parallel-level routing. . The reason why these two different typical codes are included is that it is actually easier to compare the differences between the two.

- First define the components. The difference in the way Foo components and Bar components are defined is a syntax level difference between VUE and React frameworks, and is beyond the scope of our discussion.

- After the component is defined, configure the corresponding relationship 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 corresponding relationship. The react-router definition uses JSX, which clearly expresses this correspondence and the parent-child relationship with/routing. It should be noted that VUE's routing configuration must be provided to the new VueRouter() object, which must be provided when the global VUE object is initialized; while React routing needs to be configured to the global 9532c289a9b317d4ae0f0806103be5ce component, although react-router also Provides a configuration method similar to the object array in the typical code of vue-router, but in the end the configuration still needs to be passed to 9532c289a9b317d4ae0f0806103be5ce. **One is global configuration (VUE) and the other is global component (React). This is one of the fundamental differences in the use of the two. **(vue-router does not provide html-like 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 reflect how to configure sub-routes in the typical code. In fact, as far as the use of vue-router routing components is concerned, no matter which level of routing component it is, ** will be rendered to the parent component

# Summary of differences in use:

• - vue-router is a global configuration method, react-router is a global component Way.

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

• - Any routing component of vue-router will be rendered to the 99ae171a883fff6fa2f384572360bc0a position. The react-router sub-component is passed to the parent component as children, and the root component is Render to the 9532c289a9b317d4ae0f0806103be5ce location.

Recommended learning: "react video tutorial

"###

The above is the detailed content of What is the difference between react and vue routing?. For more information, please follow other related articles on the PHP Chinese website!