如何理解react router
React Router 的基本概念
React Router 是 React 生态系统中最流行的路由库，用于管理单页应用（SPA）中的导航和页面渲染。它允许开发者通过声明式的方式定义路由规则，将 URL 路径映射到对应的 React 组件。
核心组件
- BrowserRouter / HashRouter
BrowserRouter使用 HTML5 的 history API（如pushState）实现无刷新路由切换，适合现代浏览器。HashRouter通过 URL 的哈希部分（如/#/home）实现路由，兼容性更好，但 URL 不够直观。 - Route
定义路径与组件的映射关系。例如：<Route path="/about" component={About} />当 URL 匹配
/about时，渲染About组件。 - Link / NavLink
提供导航功能，替代<a>标签以避免页面刷新。NavLink可添加激活状态的样式。<Link to="/contact">Contact</Link> - Switch
确保仅渲染第一个匹配的Route，避免多个路由同时匹配。 - Redirect
用于重定向到指定路径。例如：<Redirect from="/old" to="/new" />
动态路由与参数
通过冒号语法（:param）定义动态路径参数，组件可通过 useParams 钩子获取参数：
<Route path="/user/:id" component={User} />
// 在 User 组件中：
const { id } = useParams();嵌套路由
通过父子 Route 组件实现嵌套结构，子路由路径会继承父路由：
<Route path="/dashboard">
<Dashboard>
<Route path="/dashboard/profile" component={Profile} />
</Dashboard>
</Route>编程式导航
使用 useHistory 钩子进行编程式跳转：
const history = useHistory();
history.push("/login"); // 跳转到登录页路由守卫
通过自定义逻辑（如鉴权）控制路由访问。例如：
<Route path="/admin" render={() =>
isAuthenticated ? <Admin /> : <Redirect to="/login" />
} />代码分割与懒加载
结合 React.lazy 和 Suspense 实现按需加载路由组件，优化性能：
const Home = React.lazy(() => import('./Home'));
<Suspense fallback={<Spinner />}>
<Route path="/" component={Home} />
</Suspense>React Router 的灵活性和丰富的 API 使其成为构建复杂单页应用的理想选择，同时保持代码的可维护性和用户体验的流畅性。
