路由的发展历史
帮助需求方找到供给方
网站架构是不断发展的：
静态网站：提供html,htm文件
动态网站：
类似于ssr,通过controller层转发，通过数据库数据注入html模板
缺点：服务部署问题
前后端分离
单页网页
总结
React Router
React Router是React生态系统中最流行的路由库之一，它通过使用组件来实现在单页面应用程序中的页面切换和路由功能。它可以帮助开发人员在React应用程序中实现基于路由的导航，并将页面的状态与应用程序的URL同步。
React Router的实现原理可以分为三个主要方面：
-
路由匹配和渲染：React Router通过一个路由配置表来确定URL的匹配规则，每个路由都指向一个特定的组件。当URL与某个路由匹配时，React Router会渲染对应的组件，并且可以将URL参数作为组件的props传递给它。
-
URL的同步：当URL发生变化时，React Router会检测到URL的变化，并将URL的状态同步到React组件的状态中，从而实现了URL和页面状态之间的同步。
-
导航管理：React Router提供了一些导航组件和函数，比如Link和history，来帮助我们在应用程序中实现导航功能。这些导航组件和函数可以让我们通过编程方式控制URL的变化，并通过history API来控制浏览器的后退和前进按钮。
React Router的核心是利用React的生命周期钩子和虚拟DOM技术来进行组件的渲染和状态的同步。它实现了一种灵活的、可扩展的路由方案，能够适应不同的应用程序需求。同时，React Router还提供了一些有用的功能，比如路由懒加载、嵌套路由、重定向等，能够让开发人员更加高效地开发单页应用程序。
两大router
React Router提供了两种路由器，分别是HashRouter和BrowserRouter。它们之间的区别在于它们使用的URL模式不同。
-
HashRouter：HashRouter使用URL中的哈希值（#）来管理路由。在使用HashRouter时，所有的路由都是相对于应用程序的根路径来定位的，但是哈希值不会被发送到服务器端。这意味着当URL变化时，页面不会重新加载，而是只会在客户端内部进行路由切换。这种方式对于需要部署到静态服务器上的单页应用程序非常适用，因为它可以避免浏览器重新加载页面，从而提高了应用程序的性能和响应速度。
-
BrowserRouter：BrowserRouter使用HTML5的History API来管理路由。这种方式使用了浏览器的history.pushState()方法来更新URL，从而实现了路由切换。BrowserRouter支持所有的URL路径，因此可以用于处理动态请求。但是，当使用BrowserRouter时，需要配置服务器，以便它可以为所有路由返回同一个HTML页面。这种方式可以更好地支持SEO，因为每个页面都可以有自己的URL。
综上所述，HashRouter和BrowserRouter的选择取决于你的应用程序的需要。如果你的应用程序需要部署到静态服务器上，或者你不需要支持SEO，那么可以使用HashRouter。如果你的应用程序需要支持动态请求和SEO，那么可以使用BrowserRouter。
Rerference
[字节前端训练营 - React路由与项目实践.pptx - 飞书云文档 (feishu.cn)]>(bytedance.feishu.cn/file/BNYsbL…)
END
