如何理解react路由

React 路由的基本概念

React 路由用于管理单页应用（SPA）中的页面导航，通过动态加载组件实现无刷新跳转。核心库是 react-router-dom，它基于 URL 路径匹配渲染对应的组件。

核心组件与功能

<BrowserRouter>
包裹整个应用，提供基于 HTML5 History API 的路由功能（如 pushState）。适用于支持现代浏览器的项目。

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

<Route path="/about" component={About} />

<Link> 与 <NavLink>
替代 <a> 标签实现导航。<NavLink> 可添加激活状态的样式（如 activeClassName）。

<Link to="/contact">Contact</Link>

<Switch>
确保仅渲染第一个匹配的路由，避免多个组件同时显示。通常包裹多个 <Route>。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/user/:id" component={User} />
</Switch>

动态路由与参数传递

通过冒号语法（:param）定义动态路径，参数通过 useParams 获取：

<Route path="/user/:id" component={User} />
// 在 User 组件中：
const { id } = useParams();

编程式导航

使用 useHistory 钩子实现代码跳转：

const history = useHistory();
history.push("/dashboard");

嵌套路由

在父组件中定义子路由，路径需包含父路径前缀：

<Route path="/admin" render={() => (
  <div>
    <Route path="/admin/users" component={Users} />
  </div>
)} />

路由守卫

通过 <Redirect> 或自定义逻辑控制权限。例如未登录时重定向到登录页：

<Route path="/profile" render={() => (
  isLoggedIn ? <Profile /> : <Redirect to="/login" />
)} />

注意事项

• 精确匹配：exact 属性确保路径完全匹配，避免子路径冲突。
• 服务端支持：SPA 需服务器配置，确保直接访问子路径不返回 404。
• HashRouter：旧版浏览器可用 <HashRouter>，URL 含 #，但功能受限。

通过组合这些组件和模式，React 路由能够高效管理复杂应用的路由逻辑。