了解 React Router 基础知识：在 React 中管理导航

React Router 是 React 生态中用于实现路由功能的库，通过管理 URL 与组件的映射关系，实现单页应用（SPA）的导航功能，核心目标是简化视图切换并保持 UI 与 URL 同步。 以下是其核心概念与组件的详细说明：

• 路由（Route）定义 URL 路径与组件的映射关系，例如 /about 对应 About 组件。用户访问特定路径时，React Router 会渲染匹配的组件。
• 单页应用（SPA）应用仅加载一次，后续导航通过动态更新部分页面内容实现，避免整页刷新。React Router 专为 SPA 设计，依赖浏览器 History API 或哈希值管理 URL。

1. BrowserRouter / HashRouter

   BrowserRouter：使用 HTML5 History API 操作 URL（如 /about），需服务器配置支持。

   HashRouter：基于 URL 哈希（如 #/about），兼容旧浏览器。示例：

   import { BrowserRouter } from 'react-router-dom';const App = () => ( <BrowserRouter> <Routes /> </BrowserRouter>);

2. Routes替代 React Router v5 的 Switch，作为路由规则的容器，按顺序匹配第一个符合条件的路由。示例：

   import { Routes, Route } from 'react-router-dom';const RoutesComponent = () => ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes>);

3. Route定义单个路由规则，通过 path 和 element 属性指定路径与组件。示例：

   <Route path="/contact" element={<Contact />} />

4. Link渲染为 <a> 标签，实现无刷新导航。通过 to 属性指定目标路径。示例：

   import { Link } from 'react-router-dom';const Navigation = () => ( <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav>);

5. useNavigate编程式导航钩子，用于在事件处理或副作用中跳转路由。示例：

   import { useNavigate } from 'react-router-dom';const Login = () => { const navigate = useNavigate(); const handleLogin = () => navigate('/dashboard'); return <button onClick={handleLogin}>登录</button>;};

1. 嵌套路由通过父路由的 path 末尾添加 *（如 /dashboard/*），在父组件内部使用 <Routes> 定义子路由。示例：

   const Dashboard = () => ( <div> <nav> <Link to="profile">个人资料</Link> <Link to="settings">设置</Link> </nav> <Routes> <Route path="profile" element={<Profile />} /> <Route path="settings" element={<Settings />} /> </Routes> </div>);const App = () => ( <BrowserRouter> <Routes> <Route path="/dashboard/*" element={<Dashboard />} /> </Routes> </BrowserRouter>);

2. 路由参数通过 : 定义动态参数（如 /user/:userId），使用 useParams 提取参数值。示例：

   import { useParams } from 'react-router-dom';const UserProfile = () => { const { userId } = useParams(); return <h2>用户ID：{userId}</h2>;};const App = () => ( <BrowserRouter> <Routes> <Route path="/user/:userId" element={<UserProfile />} /> </Routes> </BrowserRouter>);

3. 重定向通过 useNavigate 或 <Navigate> 组件实现。示例：

   import { Navigate } from 'react-router-dom';const RedirectComponent = () => <Navigate to="/about" replace />;

React Router 通过 BrowserRouter、Routes、Route、Link 等组件及 useNavigate、useParams 等钩子，提供了完整的路由解决方案。掌握其核心功能（如嵌套路由、动态参数）后，可高效构建复杂的 SPA 导航逻辑，显著提升开发效率与用户体验。