react路由两种模式的原理
react router的优点React 是一个流行的 JavaScript 库，用于构建用户界面。在 React 中，路由是一种管理不同页面之间导航的方式。React 路由有两种模式：Hash 模式和 History 模式。
1. Hash 模式的原理
在 Hash 模式下，URL 中使用了一个特殊的字符 `#` 来表示路由。当用户在应用程序中导航到不同的页面时，URL 中的 `#` 后面的内容会发生变化。这种模式不会触发浏览器向服务器发送请求，而是在前端完成页面的切换。
Hash 模式的工作原理如下：
- 当应用加载时，浏览器会向服务器请求应用的根 HTML 文件。
- 浏览器加载完根 HTML 文件后，会解析其中的 JavaScript 代码，其中包含 React 路由的配置。
- 当用户在应用中进行页面导航时，URL 的 hash 部分会发生改变，并触发路由的变化。
- React 路由的会检测到 URL 的变化，并根据配置的规则匹配合适的路由组件。
- 经过匹配后，React 路由会将对应的路由组件渲染到页面中，完成页面的切换。
Hash 模式的优点是兼容性好，支持老版本的浏览器。缺点是 URL 中会出现 `#` 符号，不够美观，且不利于 SEO（搜索引擎优化）。
2. History 模式的原理
在 History 模式下，React 路由使用浏览器的 History API，不再使用 `#` 符号表示路由。相比 Hash 模式，History 模式的 URL 更加直观和美观。
History 模式的工作原理如下：
- 当应用加载时，浏览器向服务器请求根 HTML 文件。
- 根 HTML 文件加载完成后，浏览器解析其中的 JavaScript 代码，包括 React 路由的配置。
- 用户在应用中进行页面导航时，React 路由会使用 History API 修改 URL，但不会触发浏览器向服务器发送请求。
- React 路由的检测 URL 变化，并根据配置的规则匹配对应的路由组件。
- 匹配完成后，React 路由将对应的组件渲染到页面中，完成页面切换。
History 模式相比 Hash 模式，URL 更加友好，但存在一个问题是刷新页面时会向服务器发送请求，需要服务器配置支持。
总结：React 路由有两种模式，Hash 模式和 History 模式。Hash 模式使用 URL 的 hash 部分来表示路由，不会触发浏览器向服务器发送请求，而 History 模式使用浏览器的 History API，在 URL 中显示真实路径，但会在刷新页面时向服务器发送请求。选择哪种模式取决于应用的需求和兼容性要求。