引言
React Router 是 React 应用中用于处理路由的库，它允许你为单页应用程序（SPA）定义多个路由，从而实现页面之间的切换。掌握 React Router 是构建现代化 React 应用不可或缺的一环。本文将全面解读 React Router 的核心功能，并通过实战示例展示如何使用其 API。
一、React Router 简介
React Router 是由 Jed Watson 开发的一个开源库，它提供了一种声明式的方式来定义路由。React Router 包含以下几个核心组件：
BrowserRouter
：用于创建一个基于 HTML5 History API 的路由器。
HashRouter
：用于创建一个基于哈希值的路由器。
Route
：用于定义路由规则，匹配路径后渲染对应的组件。
Switch
：用于包裹
Route
组件，只渲染第一个匹配成功的路由。
二、React Router API详解
1. BrowserRouter 和 HashRouter
import { BrowserRouter as Router } from ‘react-router-dom’;

function App() {
return (

{/* 路由配置 */}

);
}
BrowserRouter
和
HashRouter
都是
Router
的子组件，用于创建路由器实例。二者的区别在于：
BrowserRouter
使用 HTML5 History API，不会在地址栏中显示
#
。
HashRouter
使用哈希值（
#
），地址栏中会显示
#
。
2. Route
Route
组件用于定义路由规则，匹配路径后渲染对应的组件。
import { Route } from ‘react-router-dom’;

function Home() {
return

Home

;
}

function About() {
return

About

;
}

function App() {
return (






);
}
Route
组件接受以下属性：
path
：匹配路径。
component
：匹配成功后渲染的组件。
exact
：精确匹配，只有当路径完全匹配时才渲染组件。
3. Switch
Switch
组件用于包裹
Route
组件，只渲染第一个匹配成功的路由。
import { Switch } from ‘react-router-dom’;

function App() {
return (






);
}
4. Link 和 NavLink
Link
和
NavLink
组件用于创建导航链接。
import { Link, NavLink } from ‘react-router-dom’;

function App() {
return (

);
}
Link
组件渲染为

标签，而
NavLink
组件渲染为

标签，并具有激活状态。
5. Redirect
Redirect
组件用于重定向到另一个路径。
import { Redirect } from ‘react-router-dom’;