Bianshun
尽管React路由器已达到V6版本，但在我们的项目中，主要用途是React路由器的V5版本，因此我们从此处的V5版本开始，以了解前端路由的实现原理。
目的：希望收获
前端路由，我们必须实现两个功能：在不刷新页面的前提下，监视和匹配路由的更改，并基于路由匹配渲染页面内容
前端路由通常提供两种匹配模式。哈希模式和历史模式之间的主要区别是URL监视部分的差异。
前端路由示例的哈希实现
前端路由示例的历史记录实现
这是一个简单的历史路由功能，但是这里存在一个问题，即刷新后，它会报告一个错误，因为地址栏URL被刷新。当前目录没有此文件资源，因此会导致错误。背景。
原因分析
如果您直接访问主页，则可以访问index.html。目前，它在服务器中匹配，并且将没有404。前端跳转路由更改由前端历史记录API控制，这与服务器无关。如果特定页面路径直接直接已访问，目前服务器没有匹配的资源，它将报告为404，因此您需要配置服务。404时，配置路由，指向index.html，然后让路由在前端控制。
对于nginx，可以像这样配置：
使用上下文实现交叉级别的组件数据传输
上下文提供了可以在组件树之间传输的方法，而无需手动向每个层组件添加道具。该组件导出两个对象提供商提供数据，消费者消费数据
简单使用React.CreateContext
原始分析：创建两个组件，有一个参数值，并且子组件在组件中传播。如果组件是，请返回组件并将值作为值传递给新创建的子组件。
使用组件国际化的上下文
历史库是反应依赖的核心库。它具有统一的抽象，即使用应用程序，包括一系列统一属性和方法，支持浏览器的浏览史，哈希史和服务器端内存史。
图书馆本身的描述是通过轻松地通过JavaScript运行JavaScript来轻松管理历史记录来轻松管理历史记录。一个对象可以在各种环境中抽象差异并提供最小的API，从而使我们可以管理历史记录会议之间的堆栈，导航和言论。
仓库以（单代码库）的形式管理。在此仓库中，还包括四个包裹
区别：
在我们面前，我们意识到了与本地JS的基本前端路线。现在介绍React路由器的源代码实现。通过实施两者，分析了React路由器实施的动机和优势
React-Router如何在我们的项目中使用？
您可以看到我们使用路由器组件，开关组件和路由组件，其中切换和路由由路由器包裹。反应路由器的组件通常分为三种类型：
我们可以查看如何实现React-Router的整个过程：
所有路由组件必须包裹在这两个组件中以要使用
源代码
源代码
无论是Hashrouter还是Browserrouter，底层都是路由器组件。Router实际上是由两个上下文组成的。由于React16和15的上下文不兼容，因此React路由器使用第三方上下文与React 16和15兼容。此上下文基于实现。该库也是React Context.polyfil，因此您可以直接认为两者是相同的。React路由器团队已经计划使用API来创建它们。名称为，名称为。
路由器组件调用路由监视的历史记录方法的收听方法，并将监视器位置的值放在大型RouterContext中。
源代码
现在，我们了解了为什么需要在使用路由器容器组件中包裹路由组件，然后再使用路由器容器组件，因为路由信息是由外部容器组件传递给所有后代组件的所有后代组件。路由更改，容器组件将触发子组件渲染。
在这里，我们完成了此步骤。在React路由器中，此步骤由历史库完成。编码呼叫。Listen完成了多种路由模式的监视。LET查看React路由器的匹配方式。
三种匹配方法
源代码
MatchPath匹配路径
我们可以从源代码中看到：
匹配过程：
您可以通过上述分析学习
Anti的前端团队是一支年轻而多样的团队，位于武汉，被称为九个省。我们的团队现在由一个20+的前端合作伙伴组成。平均年龄为26岁。每日核心业务是网络安全产品。此外，已经进行了基础架构，效率工程，可视化和经验创新的许多方面。可追溯性，大屏幕）在安全方案中，基于Node.js的完整堆栈开发等等。
如果您追求更好的用户体验，则渴望将业务/技术结果抛弃，欢迎来到?yan.zheng@qingteng.cn
React路由器V5和V6的比较
React-Router源代码很好的家伙！
分析React路由器的源代码
原始：https：//juejin.cn/post/7094849986814279710