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 "
", but react routing is not.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
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: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
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:
```
<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 'react'
export default React.createClass({undefined
render() {undefined
return<div>Foo</div>
}
})
```
```
// modules/Bar.js
import React from 'react'
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('app'))
```
```
// 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
- 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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
