>[danger]不同路由实现原理区别 在 React 中，路由的不同模式实现原理主要体现在 URL 的表现形式和对浏览器历史记录的处理上。以下是 React 中路由不同模式的实现原理区别： 1. **Hash 模式**： - **URL 表现形式**：Hash 模式的 URL 包含一个带有 # 号的 hash 部分，例如 `http://example.com/#/about`。 - **实现原理**：当 URL 的 hash 部分发生变化时，浏览器会触发 hashchange 事件，路由库会监听这个事件并根据新的 hash 值来渲染相应的组件。 - **浏览器历史记录处理**：在 Hash 模式下，改变 URL 的 hash 部分不会向服务器发送请求，因此不会生成新的历史记录，不会影响浏览器的前进后退功能。 2. **History 模式**： - **URL 表现形式**：History 模式的 URL 更加常规，不包含 # 号，例如 `http://example.com/about`。 - **实现原理**：使用 HTML5 History API 中的 pushState 和 replaceState 方法来改变 URL，同时监听 popstate 事件以便在 URL 发生变化时进行相应的路由切换。 - **浏览器历史记录处理**：在 History 模式下，可以通过 pushState 和 replaceState 方法改变 URL，并且这些改变会向浏览器历史记录中添加新的条目，从而影响浏览器的前进后退功能。 总的来说，Hash 模式通过改变 URL 的 hash 部分来进行路由切换，不会向服务器发送请求，而 History 模式则通过 HTML5 History API 来改变整个 URL，可以更加自然地呈现 URL，同时能够利用浏览器的前进后退功能。在 React 中，这两种模式的实现原理会影响到路由库的具体实现方式以及开发者在配置路由时的选择。