React-Router v6 新特性解读及迁移指南

前言

18年初，React Router的主要开发人员创建一个名为Reach Router的轻量级替代方案。

原来是相互抗衡的，却没想React Router直接拿来合并（真香！）

目前 v6已是测试最后一版，估计新的特性不出意外就是下面这些了。

重命名为。
的新特性变更。
嵌套路由变得更简单。
用useNavigate代替useHistory。
新钩子useRoutes代替react-router-config。
大小减少：从20kb到8kb

1. 重命名为

该顶级组件将被重命名。但是，其功能大部分保持不变（嗨，瞎折腾）。

// v5

    
    


// v6

    } />
    } />
 } />
      
    
  );
}

function App() {
  return (
    
      } />
      已被删除并且在v6中无效。这并不意味着您不需要使用斜杠。
在v5版本之前的路径，存在路由歧义
当前路径:"/users"，则将跳转。
当前路径:"/users/"，则将跳转。
React Router v6修复了这种歧义，取消了尾部"/"：
当前路径:"/users"，则将跳转。
当前路径:"/users"，则将跳转。
其形式更像命令行cd的用法：
// 当前路径为 /app/dashboard 

 // 
     // 
  // 
      // 

// 命令行当前路径为 /app/dashboard
cd stats   // pwd is /app/dashboard/stats
cd ../stats// pwd is /app/stats
cd ../../stats    // pwd is /stats
cd ../../../stats // pwd is /stats

结语
参考文章：

A Sneak Peek at React Router v6

What’s new in React Router v6
React Router v6 in Three Minutes
Migrating React Router v5 to v6

❤️ 看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
关注公众号「前端劝退师」，不定期分享原创知识。
也看看其它文章
也可以来我的GitHub博客里拿所有文章的源文件：
前端劝退指南：https://github.com/roger-hiro/BlogFN

一起玩耍呀。~

React-Router v6 新特性解读及迁移指南

JavaScript相关栏目本月热门文章