react路由实现原理
React路由实现原理
React路由的核心原理是基于客户端路由（Client-side Routing），通过监听URL变化动态渲染对应组件，无需向服务器发起请求。主要依赖浏览器API（如history）和React的组件化机制实现。
核心机制
URL与组件映射
通过配置路由表（如<Route path="/about" component={About} />）建立路径与组件的对应关系。路由库（如React Router）会解析当前URL，匹配最合适的组件进行渲染。
历史记录管理
利用浏览器提供的history API（包括pushState、replaceState和popstate事件）实现URL变更的无刷新跳转。HashRouter则通过window.location.hash和hashchange事件实现兼容性方案。
动态渲染
路由库通过React上下文（Context）传递路由状态（如当前URL、参数等），被<Router>包裹的组件可通过Hooks（如useHistory）或高阶组件获取这些状态，触发重新渲染。
关键代码示例
// 简化的路由匹配逻辑
function matchPath(pathname, routeConfig) {
for (const route of routeConfig) {
const match = pathToRegexp(route.path).exec(pathname);
if (match) return { component: route.component, params: match.groups };
}
return null;
}// 监听URL变化的核心逻辑
window.addEventListener('popstate', () => {
const match = matchPath(window.location.pathname, routes);
setCurrentComponent(match.component);
});实现方式对比
BrowserRouter
使用HTML5 History API，URL格式为/path。需要服务器配置支持，返回index.html以处理直接访问深层路由的情况。
HashRouter
使用#符号后的路径（如/#/about），兼容性更好但URL不够美观。无需服务器特殊配置。
MemoryRouter 将路由状态保存在内存中，适用于非浏览器环境（如测试或React Native）。
进阶特性原理
嵌套路由
通过路由配置的层级关系实现，父路由组件渲染<Outlet>时，子路由匹配的组件会填充到该位置。
懒加载
结合React的Suspense和lazy，动态导入组件并在加载期间显示fallback UI：
const About = lazy(() => import('./About'));
<Route path="/about" element={
<Suspense fallback={<Spinner />}>
<About />
</Suspense>
} />路由守卫
通过高阶组件或<Navigate>重定向，在渲染前检查权限等条件：
<Route path="/dashboard" element={
isLoggedIn ? <Dashboard /> : <Navigate to="/login" />
} />性能优化策略
路由预加载 在鼠标悬停或用户空闲时预加载路由组件：
const preload = (path) => import(`./${path}`).then(module => cache[path] = module);
<Link to="/about" onMouseEnter={() => preload('About')} />路由代码分割
通过Webpack的动态import()语法自动生成分块（chunks），减少初始加载体积。
