react HashRouter的原理

React 的 HashRouter 是 React Router 提供的一种路由器类型，它使用 URL 的哈希（hash）来实现路由。HashRouter 的原理是通过监听 URL 的哈希变化来确定当前的路由状态，并根据配置的路由规则将对应的组件渲染到页面上。

当使用 HashRouter 时，URL 的格式通常为 `http://example.com/#/path`，其中 `#/path` 是 URL 的哈希部分。通过这种方式，浏览器不会向服务器发送请求，而是仅仅改变 URL 的哈希部分，从而实现页面之间的切换。

下面是 HashRouter 的工作原理：

1. 初始化：当应用启动时，HashRouter 会监听 URL 的哈希变化，并根据当前的哈希值来确定初始路由状态。

2. 路由匹配：HashRouter 使用配置的路由规则来匹配当前的哈希值，并确定要渲染的组件。匹配是基于哈希值中 `#/` 后面的部分。

3. 组件渲染：根据匹配到的路由规则，HashRouter 会将对应的组件渲染到页面上。这些组件可以通过 Route 组件来定义和配置。

4. 哈希变化监听：HashRouter 会监听 URL 的哈希变化事件，当哈希值发生变化时，会重新进行路由匹配和组件渲染。

5. 导航操作：HashRouter 提供了一些导航方法，如 push、replace 和 go 等，可以通过编程方式进行导航操作。这些方法会修改 URL 的哈希部分，并触发相应的哈希变化事件。

总的来说，HashRouter 的原理是通过监听 URL 的哈希变化来确定当前的路由状态，并根据配置的路由规则将对应的组件渲染到页面上。使用 HashRouter 可以在不借助服务器的情况下实现页面之间的切换和导航。