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 变化，再用路径匹配渲染对应组件，而不刷新页面。
