北京知名手足癣医院 https://m-mip.39.net/disease/mip_8593664.html一前言不知不觉react-router已经到了v6版本了，可能很多同学发现，v6相比之前的v5有着翻天覆地的变化，因为最近接触到了React的新项目，用到了v6版本的react-router，亲身体验发现这还是我认识的router吗？从api到原理都有较大的改动，所以今天就和大家一起看一下新版路由的变化。对于这次的改动，笔者的建议是：如果是新项目，可以尝试新版本的Rouer，对于老项目，建议还是不要尝试升级v6，升级的代价是会造成大量的功能改动，而且如果用到了依赖于router的第三方库，可能会让这些库失效。所以一些依赖于react-router的第三方库，也需要升级去迎合v6版本了，比如笔者之前的缓存页面功能的react-keepalive-router，也会有大版本的更新。
通过本章节的学习，你将学习到以下内容：
新版本路由和老版本的差异，使用区别，API区别。新版本路由组件Router，Routes，和Route的原理。Outlet组件原理。useRoutes原理。
让我们开始今天的routerv6学习之旅吧。
二基本使用
首先我们从路由的使用方法上，来看一下v6的变化，还是举例一个场景。比如有如下的路由结构：
如上图所示，页面分为简单的2级路由结构：
第一级页面有home页面，list页面，和children页面。第二级页面是children页面的子路由，包括：child1和child2。
接下来看一下，新老版本路由在使用上有什么区别。
1老版本路由配置老版本路由
入口文件-一级路由
constindex=()={returndivclassName="page"divclassName="content"BrowserRouterMenus/SwitchRoute
转载请注明：http://www.aierlanlan.com/rzfs/160.html
