如何理解react router

React Router 的基本概念

React Router 是一个用于 React 应用的流行路由库，允许在单页应用（SPA）中实现导航和路由功能。它通过管理 URL 和组件的映射关系，实现无刷新页面切换。

核心组件

BrowserRouter
使用 HTML5 的 history API 来保持 UI 与 URL 同步。通常作为应用的根组件包裹其他路由相关组件。

Route
定义路径与组件的映射关系。通过 path 属性指定匹配的 URL，component 或 render 属性指定渲染的组件。

Link 和 NavLink
用于导航的组件，生成可点击的链接。NavLink 额外支持高亮当前激活的路由。

Switch
确保仅渲染第一个匹配的 Route 或 Redirect，避免多个路由同时匹配。

动态路由与参数

通过 :param 语法定义动态路径，例如 /user/:id。路由参数可通过 useParams Hook 或 match.params 获取：

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

嵌套路由

在父组件中嵌套子路由，通过相对路径实现层级关系：

<Route path="/dashboard">
  <Dashboard>
    <Route path="profile" component={Profile} />
  </Dashboard>
</Route>

编程式导航

使用 useHistory Hook 或 history 对象进行编程式跳转：

import { useHistory } from 'react-router-dom';

function Button() {
  const history = useHistory();
  return <button onClick={() => history.push('/home')}>Go Home</button>;
}

重定向与守卫路由

Redirect
用于强制跳转到指定路径，常用于权限控制或默认路由。

路由守卫
通过高阶组件或条件渲染实现权限验证：

<Route path="/admin" render={() => 
  isAuth ? <Admin /> : <Redirect to="/login" />
} />

Hooks API

React Router v5.1+ 提供了一系列 Hooks：

• useRouteMatch：检查当前路径是否匹配指定模式。
• useLocation：获取当前 location 对象。
• useParams：访问动态路由参数。

版本差异

• v5.x：稳定版本，支持类组件和 Hooks。
• v6.x：简化 API，移除 <Switch> 改用 <Routes>，路由配置更紧凑。

性能优化

使用 React.lazy 和 Suspense 实现路由级代码分割：

const Home = React.lazy(() => import('./Home'));

<Route path="/home">
  <Suspense fallback={<Spinner />}>
    <Home />
  </Suspense>
</Route>