vue-router和react-router嵌套路由layout配置方案的区别

最近在学习react，在路由这一块有点看不懂，第一感觉是灵活性很大，想怎么来就怎么来，但问题也来了，稍微复杂一点就GG了，不如vue的傻瓜式配置来的方便。

先说一下vue的路由配置方式，目录结构如下（简化了结构）

━ src├━ App.vue├━ layout.vue├━ router.js┕━ main.js

main.js的内容是官方标配，没什么好说的，引入路由配置并加载

import router from './router'  // 引入路由配置
import App from './App.vue'
new Vue({router, // 加载路由配置render: h => h(App)
}).$mount('#app')

App.vue中添加一个router-view作为一级路由视图

<template><div id="app"><router-view/></div>
</template>

router.js书写路由配置

import Layout from './layout'
export default new VueRouter({mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',component: Layout,children: [{path: 'about',component: () => import('./About.vue')},{path: 'about2',component: () => import('./About2.vue')}]},{path: '/404',name: '404',component: () => import('./404.vue')}]
})

layout.vue布局文件，中间添加一个router-view作为二级路由视图

<template><div class="layout-container"><header><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-link to="/about2">About2</router-link><router-link to="/404">404</router-link></header><router-view class="layout-content"></router-view><footer></footer></div>
</template>

简单的说一下，
App.vue就是根元素，路径/和/404都将对应路由的组件渲染在App中的router-view位置，分别是layout.vue和404.vue；
路径/下的子路由about和about2对应的完整路径分别为/about和/about2，当匹配这两个路径时，首先会在App根元素下渲染一级路由的组件，即layout.vue，然后再在一级路由组件（layout.vue）中的router-view位置渲染二级路由组件。

现在来看一下react-router的工作方式，一个简单的路由如下（用的是react-router-dom，）
修改App.js，使用了Switch包裹，表示只渲染第一个匹配路由的组件

import React from 'react';
import { BrowserRouter, Route, Link } from "react-router-dom";const Layout = props => (<div className="layout-container"><header><Link to='/'>Home</Link><Link to='/about'>About</Link><Link to='/about2'>About2</Link><Link to='/404'>404</Link></header>{props.children}<footer></footer></div>
)
const About = props => (<div>this is About Page</div>
)
const About2 = props => (<div>this is About2 Page</div>
)
const Page404 = props => (<div>this is 404 Page <Link to="/">GO HOME</Link></div>
)const App = props => (<BrowserRouter><Switch><Route path='/404' component={Page404}></Route><Layout><Route path="about" component={About}></Route></Layout></Switch></BrowserRouter>
)
export default App;

对比vue，react-router一个很明显的区别就是路由是直接写在组件中的，这继承了react的核心思想，一切皆为组件。

其实仔细想想，从感官层面来讲，vue-router中的router-view也是一个特殊的组件，功能有点类似vue的动态组件<component />，通过匹配地址与路由，将对应的组件替渲染出来；react-router也是如此，有了Switch，react-router将匹配到的唯一路由对应的组件渲染出来，这样一想，两者其实很相似，区别在于vue将这一过程在内部封装简化了，而react则显式的需要我们手动去书写这一过程。

调试react-router可以发现，在404页面和home页面之间切换，页面时发生变化了的，说明路由生效，但是点击about页面无任何变化，这就有点惆怅了，难道不支持嵌套路由？？？

其实并不是，如果把404路由放到Layout下面去的话（如下更改，下面简称代码2，原来的简称代码1），会发现404页面也无法切换了

// 代码2
const App = props => (<BrowserRouter><Switch><Layout><Route path="about" component={About}></Route></Layout><Route path='/404' component={Page404}></Route></Switch></BrowserRouter>
)

这是因为使用了Switch，它只会渲染第一个匹配的组件，那么代码2中不管匹配到什么地址，Switch在渲染了Layout后就不在渲染其他的路由对应的组件了，那么加一层路由地址呢？？？（如下代码3）

const App = props => (<BrowserRouter><Switch><Route path='/'><Layout><Route path='about' component={About}></Route></Layout></Route><Route path='/404' component={Page404}></Route></Switch></BrowserRouter>

结果还是不起作用，通过react-dev-tool发现，内部的路由组件根本没有发生变化，其实到这里问题就已经很明显了，加上之前的分析，react复杂路由之所以不生效就是因为路由匹配问题，不管是/404还是/about，在代码3这种写法下，路由匹配到<Route path='/'>这里的时候就截至了，不会再往下或往后继续匹配，这让我想起了ThinkPHP的路由，需要将静态路由和长路由写在前面，或者添加截至符号。react-router可以通过Route的exact属性来达到完全匹配的效果。代码修改如下（代码4）

const App = props => (<BrowserRouter><Switch><Route exact path='/' component={Layout}></Route><Route path='/404' component={Page404}></Route><Layout><Route path='/about' component={About}></Route><Route path='/about2' component={About2}></Route></Layout></Switch></BrowserRouter>
)

代码4可以实现4个页面的切换，效果和vue一致。

总结：react的路由配置和vue相比，还是有很大区别的，vue的嵌套路由比较直观，书写也很方便，react的路由配置更贴近于传统的路由配置方式。官方倒是有嵌套路由的案例，但是那个还没有弄懂，代码调试不通过，我看的那个应该是旧版的文档，可能不适用新版的react-router。

vue-router和react-router嵌套路由layout配置方案的区别相关推荐

解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析问题解决结语前言众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
静态路由和默认路由的配置实战及其区别--很详细哦
静态路由和默认路由的配置实战及其区别一:实验拓扑二:实验要求 1:实现全网互通 2:实现静态路由与动态路由的区别认识 3:熟练掌握其配置命令三:实验步骤第一步:ip地址.环回扣的划分 R1 ...
Vue第二部分(4)：嵌套路由和路由传参
嵌套路由实际生活中的应用界面,通常由多层嵌套的组件组合而成.当我们路由到某一个组件后,还经常需要在该组件中继续路由到其子组件,这就需要使用Vue的嵌套路由.比如:当我们路由到登录组件后,又分为手机验 ...
前端学习（3020）：vue+element今日头条管理--创建路由和配置路由
React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...

vue-router和react-router嵌套路由layout配置方案的区别

vue-router和react-router嵌套路由layout配置方案的区别相关推荐

最新文章

热门文章