前端React Router从入门到进阶实战

React Router 是 React 应用中的一个重要库，它用于实现客户端的路由管理，能够将 URL 路径与 React 组件关联起来，从而实现页面之间的导航。React Router 不会像传统的多页面应用那样重新加载页面，而是通过组件切换来呈现不同的视图，这使得 React 应用能够拥有更高的性能和更流畅的用户体验。

React Router 是 React 生态中最常用的路由库，用于在 React 应用中处理页面的导航和路由。它允许开发者通过 URL 映射到不同的组件，从而创建单页应用（SPA）。React Router 通过声明式方式管理路由的配置，支持嵌套路由、动态路由、路由守卫、重定向等功能。

知识框架

1. React Router 基本概念

1.1 路由与组件的关系

React Router 的核心思想是将 URL 与组件关联，匹配到某个路由时，渲染对应的组件。

Route：表示路径与组件的映射关系。
Link：在应用中跳转到不同路由的组件。
BrowserRouter / HashRouter：为应用提供路由管理，BrowserRouter 使用 HTML5 历史 API，HashRouter 使用哈希值。

1.2 路由的核心组件

BrowserRouter / HashRouter：路由容器，包裹整个应用，提供路由的上下文。
Route：定义路径与组件的映射关系。
Link：用于在应用中进行导航，跳转到指定的路由。
Switch（React Router v5及以前）/ Routes（React Router v6及以后）：用来确保一次只渲染一个匹配的路由。

1.3 路由的生命周期

React Router 会监听 URL 的变化，当 URL 发生变化时，它会匹配最合适的 Route，并渲染对应的组件。

2. React Router 版本变化

2.1 React Router v5

Switch：只有第一个匹配的 Route 会被渲染。Switch 用于包裹路由，并确保在多个路由中，只渲染一个匹配的路由。
exact：路由精确匹配，表示路径需要完全匹配才会渲染组件。

2.2 React Router v6

Routes：取代了 v5 中的 Switch，用于确保只有一个路由匹配时才会渲染。
Route：v6 中的 Route 不再有 exact 属性，所有的路由默认都是精确匹配的。
useNavigate：取代了 v5 中的 history.push，用于在函数组件中进行编程式导航。
useRoutes：允许通过配置对象定义路由，简化路由配置和动态路由。
Outlet：在父路由组件中渲染子路由的占位符。

3.React Router 主要组件

1. Router 组件

React Router 提供了多个 Router 组件来管理路由：

<BrowserRouter>：通过 HTML5 的 history API 来保持 UI 和 URL 同步。这是大多数单页应用的推荐使用方式。
<HashRouter>：通过 URL 中的 hash 部分（# 后面的部分）来管理路由，适用于不支持 history API 的环境。
<MemoryRouter>：使用内存中的路由，适用于非浏览器环境（比如服务器端渲染、React Native）。

import { BrowserRouter as Router } from 'react-router-dom';function App() {return (<Router>{/* 路由定义和组件 */}</Router>);
}

2. Route 组件

<Route> 用于定义路径和渲染的组件。它根据当前路径来判断是否匹配，并渲染对应的组件。

import { Route } from 'react-router-dom';<Route path="/home" component={Home} />

path：定义匹配的路径，支持通配符（例如 /post/:id）。
component：匹配路径时渲染的组件（React Router v5）。在 v6 中使用 element 属性来渲染组件。
render 和 children：可以提供渲染函数来返回动态内容。

3. Link 组件

<Link> 用于在不同的路由之间进行导航。它通过 to 属性指定目标路由。

import { Link } from 'react-router-dom';<Link to="/about">About</Link>

4. Switch / Routes 组件

<Switch>：在 React Router v5 中，<Switch> 用于包裹多个 <Route>，确保一次只渲染一个匹配的路由。
<Routes>：在 React Router v6 中，<Switch> 被替换为 <Routes>，它同样确保只渲染第一个匹配的路由。

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

5. useNavigate (React Router v6)

useNavigate 是一个钩子，用于在函数组件中进行编程式导航。

import { useNavigate } from 'react-router-dom';const SomeComponent = () => {const navigate = useNavigate();const goToHome = () => {navigate('/home');};return <button onClick={goToHome}>Go to Home</button>;
};

6. useParams

useParams 是一个钩子，用于在路由中获取动态参数（如路径中的 :id）。

import { useParams } from 'react-router-dom';const Post = () => {const { id } = useParams(); // 获取 URL 参数return <div>Post ID: {id}</div>;
};

7. useLocation

useLocation 可以访问当前 URL 的信息（路径、查询参数等）。

import { useLocation } from 'react-router-dom';const CurrentLocation = () => {const location = useLocation();return <div>Current path: {location.pathname}</div>;
};

8. useMatch

useMatch 用来检查当前的 URL 是否与某个路径匹配，并获取路由参数。

import { useMatch } from 'react-router-dom';const MatchTest = () => {const match = useMatch('/post/:id');return match ? <div>Matched Post ID: {match.params.id}</div> : <div>No match</div>;
};

4.React Router 高级用法

1. 嵌套路由

React Router 支持路由嵌套，父组件的路由可以嵌套显示子路由。通过 <Outlet> 占位符渲染子路由。

import { Routes, Route, Outlet } from 'react-router-dom';const Dashboard = () => (<div><h2>Dashboard</h2><Outlet />  {/* 子路由会渲染在这里 */}</div>
);const Settings = () => <div>Settings Page</div>;function App() {return (<Routes><Route path="/dashboard" element={<Dashboard />}><Route path="settings" element={<Settings />} /></Route></Routes>);
}

2. 路由重定向

React Router 允许通过 <Navigate> 实现路由重定向（在 v6 中取代了 v5 中的 <Redirect>）。

import { Navigate } from 'react-router-dom';<Route path="/old-path" element={<Navigate to="/new-path" />} />

3. 路由守卫

React Router 本身没有内置的路由守卫功能，但可以通过编程方式实现。例如，如果用户没有登录，可以重定向到登录页面。

import { Navigate } from 'react-router-dom';const ProtectedRoute = ({ children }) => {const isAuthenticated = false; // 认证逻辑return isAuthenticated ? children : <Navigate to="/login" />;
};<Routes><Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
</Routes>

4. 动态加载组件（代码分割）

React Router 可以与 React.lazy() 和 Suspense 一起使用，按需加载组件。

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';const LazyHome = lazy(() => import('./Home'));function App() {return (<Routes><Route path="/" element={<Suspense fallback={<div>Loading...</div>}><LazyHome /></Suspense>} /></Routes>);
}

5. 查询参数

React Router 提供了获取 URL 查询参数的功能，可以通过 useSearchParams 钩子来处理。

import { useSearchParams } from 'react-router-dom';const SearchPage = () => {const [searchParams, setSearchParams] = useSearchParams();const query = searchParams.get('q');  // 获取查询参数return <div>Search query: {query}</div>;
};

5.React Router 配置示例

简单路由配置（React Router v6）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Router>);
}

动态路由配置

import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';const Post = () => {const { id } = useParams();  // 获取动态路由参数return <h2>Post {id}</h2>;
};function App() {return (<Router><Routes><Route path="/post/:id" element={<Post />} /></Routes></Router>);
}

6. 常用的 React Router 功能实战

3.1 基本用法

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';const Home = () => <div>Home</div>;
const About = () => <div>About</div>;function App() {return (<Router><nav><Link to="/">Home</Link><Link to="/about">About</Link></nav><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /></Switch></Router>);
}export default App;

3.2 动态路由

import React from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';const Post = () => {const { id } = useParams(); // 获取动态路由的参数return <div>Post ID: {id}</div>;
};function App() {return (<Router><nav><Link to="/post/1">Post 1</Link><Link to="/post/2">Post 2</Link></nav><Route path="/post/:id" component={Post} /></Router>);
}export default App;

3.3 编程式导航 (React Router v6)

import React from 'react';
import { useNavigate } from 'react-router-dom';const Home = () => {const navigate = useNavigate();const handleClick = () => {navigate('/about');};return (<div><h1>Home</h1><button onClick={handleClick}>Go to About</button></div>);
};export default Home;

3.4 嵌套路由

import React from 'react';
import { BrowserRouter as Router, Route, Link, Outlet } from 'react-router-dom';const Dashboard = () => (<div><h2>Dashboard</h2><nav><Link to="settings">Settings</Link></nav><Outlet /> {/* 渲染嵌套路由的占位符 */}</div>
);const Settings = () => <div>Settings Page</div>;function App() {return (<Router><Route path="dashboard" element={<Dashboard />}><Route path="settings" element={<Settings />} /></Route></Router>);
}export default App;

7. 高级用法实战

4.1 路由重定向

Redirect（v5）/ Navigate（v6）

v5：

import { Redirect } from 'react-router-dom';// 重定向到首页
<Route path="/old-path"><Redirect to="/" />
</Route>

v6：

import { Navigate } from 'react-router-dom';<Route path="/old-path" element={<Navigate to="/" />} />

4.2 路由守卫（保护路由）

React Router 本身不提供守卫功能，但可以通过编程方式进行实现，例如根据用户的认证状态来决定是否跳转到登录页。

import { Navigate } from 'react-router-dom';const ProtectedRoute = ({ element, ...rest }) => {const isAuthenticated = false; // 用户是否认证return isAuthenticated ? element : <Navigate to="/login" />;
};// 使用
<Route path="/profile" element={<ProtectedRoute element={<Profile />} />} />

4.3 通过 `useLocation` 获取当前 URL

import { useLocation } from 'react-router-dom';const CurrentLocation = () => {const location = useLocation();return <div>Current URL: {location.pathname}</div>;
};

4.4 动态加载组件

通过 React.lazy 和 Suspense 实现按需加载。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';const LazyHome = lazy(() => import('./Home'));function App() {return (<Router><Suspense fallback={<div>Loading...</div>}><Route path="/" component={LazyHome} /></Suspense></Router>);
}

8. React Router 底层核心原理

8.1 核心原理

路由监听：通过 window.history 或 window.location.hash 监听 URL 的变化。
匹配规则：使用 path-to-regexp 库将路径转换为正则表达式，匹配当前 URL。
渲染更新：匹配的路由组件通过 React 的状态更新机制触发重新渲染。

8.2 关键步骤

路由定义时，存储路径与组件的映射关系。
URL 变化时，根据路径规则找到对应组件。
使用 React 渲染匹配的组件。