React Router 6 (React路由) 最详细教程

本文首发：《React Router 6 (React路由) 最详细教程》

React Router 经历多个版本的发展，现在已经到了 React Router 6。虽然网络上写 React-Router 路由本身的教程很多，但真正讲到 React-Router 6 的并不多。同时因为第 6 版引入了很多新的概念，以及大量使用 Hook，因此网上的很多旧教程已经不实用了。这篇文章里我们总结 React Router 6 路由器的用法，用例子说明如何实现各种场景和需求，比如程序化跳转等等。

在卡拉云中，我们也大量地使用了 React-Router 6，所以在讲解过程中我们会用一些在实际使用的例子来说明问题，但本文的主要例子会放在 github 仓库中，方便你参考。如果你觉得有用，不妨分享和加星，或在博客中链回本文，让更多人看到。

本系列中其它优秀教程请参考

• React 表格教程
• React 拖拽教程
• React 富文本组件

当然如果你希望快速搭建后台系统，也推荐尝试卡拉云，可以免掉前后端开发、维护的烦恼

什么是 React-Router

要理解什么是 React-Router 就要先理解什么是 SPA (Single Page Application)，也就是俗称的单页应用。

每个单页应用其实是一系列的 JS 文件，当用户请求网站时，网站返回一整个(或一系列)的 js 文件和 HTML，而当用户在某个页面内点击时，你需要告诉浏览器怎么加载另一个页面地址。单页应用中通常只有一个 index.html 文件的，所以浏览器自带的 <a> 链接 tag 并不能用来做单页应用的跳转，因此你需要一个在 React 中的路由实现。

然而 React 框架本身是不带路由功能的，因此如果你需要实现路由功能让用户可以在多个单页应用中跳转的话，就需要使用 React-Router。

React-Router 从 2014 年开始开发，到