react-router 的原理

React Router 的核心原理：Hash 路由 & History 路由

React Router 本质上是前端实现路由跳转，不刷新页面，同时实现页面组件切换。

浏览器本身有两种方式能做到：

① Hash 路由（#/path）

例如：

https://example.com/#/home

通过监听：

window.onhashchange

切换 URL 中 # 后面的部分，不会触发页面刷新。

② History 路由（/home）

使用浏览器的 HTML5 history API：

history.pushState()
history.replaceState()
window.onpopstate

同样可以改变 URL，但不刷新页面。

React Router 的根本做法总结一句话：

监听 URL 变化（hash/popstate） → 根据 pathname 匹配对应组件 → 渲染该组件

就是这么简单明了。

React Router 原理分解

1. 用 Router 组件监听 URL

React Router 内部有两种 router：

BrowserRouter（使用 history API）

监听：

window.onpopstate = () => 更新页面

修改路由：

history.pushState({}, '', '/about')

HashRouter（使用 hash）

监听：

window.onhashchange = () => 更新页面

修改 hash：

window.location.hash = '#/about'

2. Router 保存当前路径（location）

每当 URL 改变：

• Router 读取当前的 window.location.pathname 或 hash

• 保存成自己的 location 状态

例如：

{ pathname: '/home' }

Router 就会把它挂到 React Context 上，让所有子组件都能访问。

3. Routes / Route 做“路径匹配”

例如：

<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/user/:id" element={<User />} />
</Routes>

Routes 会拿到 Router 提供的 location.pathname
然后用内部的“路径匹配器”去匹配：

"/home" ——> 匹配 Home 组件
"/user/123" ——> 匹配 User 组件

匹配成功，就返回对应 component。

4. Route element 被渲染出来（最终输出 UI）

匹配到的组件会返回 render 出 React 节点：

<Router>
  <Routes>
    匹配到什么 Route，就渲染它对应的 element
  </Routes>
</Router>

组件切换了，但是页面没有刷新。

5. Link / navigate 做跳转（本质就是改 URL）

Link：

<Link to="/home">首页</Link>

底层相当于：

history.pushState({}, '', '/home')

就是修改 URL。

navigate()

navigate('/home');

底层也是 pushState 或 hash。

修改 URL → 路由监听到 → 路径匹配 → 渲染新组件

用一张图总结整个流程

用户点击 Link 或 navigate()
        ↓
修改 URL（pushState / hash）
        ↓
Router 监听到 URL 改变
        ↓
更新 location 状态
        ↓
Routes 根据 path 做匹配
        ↓
匹配到 Route 后渲染元素
        ↓
React 刷新组件（无刷新切换页面）

核心就是：URL 改了 → Router 匹配 → component 切换。

总结

react-router 实现前端路由的核心：利用浏览器的 History API 或 Hash 机制，监听 URL 变化，再用路径匹配渲染对应组件，而不刷新页面。