前端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）。
  

1. import { BrowserRouter as Router } from 'react-router-dom';
3. function App() {
4.   return (
5.     <Router>
6.       {/* 路由定义和组件 */}
7.     </Router>
8.   );
9. }

复制代码

2. Route 组件

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

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

复制代码

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

3. Link 组件

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

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

复制代码

4. Switch / Routes 组件

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

1. import { Routes, Route } from 'react-router-dom';
3. <Routes>
4.   <Route path="/" element={<Home />} />
5.   <Route path="/about" element={<About />} />
6. </Routes>

复制代码

5. useNavigate (React Router v6)

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

1. import { useNavigate } from 'react-router-dom';
3. const SomeComponent = () => {
4.   const navigate = useNavigate();
5.   const goToHome = () => {
6.     navigate('/home');
7.   };
9.   return <button onClick={goToHome}>Go to Home</button>;
10. };

复制代码

6. useParams

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

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

复制代码

7. useLocation

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

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

复制代码

8. useMatch

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

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

复制代码

4.React Router 高级用法

1. 嵌套路由

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

1. import { Routes, Route, Outlet } from 'react-router-dom';
3. const Dashboard = () => (
4.   <div>
5.     <h2>Dashboard</h2>
6.     <Outlet />  {/* 子路由会渲染在这里 */}
7.   </div>
8. );
10. const Settings = () => <div>Settings Page</div>;
12. function App() {
13.   return (
14.     <Routes>
15.       <Route path="/dashboard" element={<Dashboard />}>
16.         <Route path="settings" element={<Settings />} />
17.       </Route>
18.     </Routes>
19.   );
20. }

复制代码

2. 路由重定向

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

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

复制代码

3. 路由守卫

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

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

复制代码

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

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

1. import React, { Suspense, lazy } from 'react';
2. import { Routes, Route } from 'react-router-dom';
4. const LazyHome = lazy(() => import('./Home'));
6. function App() {
7.   return (
8.     <Routes>
9.       <Route path="/" element={<Suspense fallback={<div>Loading...</div>}><LazyHome /></Suspense>} />
10.     </Routes>
11.   );
12. }

复制代码

5. 查询参数

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

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

复制代码

5.React Router 设置示例

简单路由设置（React Router v6）

1. import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
3. const Home = () => <h1>Home Page</h1>;
4. const About = () => <h1>About Page</h1>;
6. function App() {
7.   return (
8.     <Router>
9.       <Routes>
10.         <Route path="/" element={<Home />} />
11.         <Route path="/about" element={<About />} />
12.       </Routes>
13.     </Router>
14.   );
15. }

复制代码

动态路由设置

1. import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';
3. const Post = () => {
4.   const { id } = useParams();  // 获取动态路由参数
5.   return <h2>Post {id}</h2>;
6. };
8. function App() {
9.   return (
10.     <Router>
11.       <Routes>
12.         <Route path="/post/:id" element={<Post />} />
13.       </Routes>
14.     </Router>
15.   );
16. }

复制代码

6. 常用的 React Router 功能实战

3.1 基本用法

1. import React from 'react';
2. import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
4. const Home = () => <div>Home</div>;
5. const About = () => <div>About</div>;
7. function App() {
8.   return (
9.     <Router>
10.       <nav>
11.         <Link to="/">Home</Link>
12.         <Link to="/about">About</Link>
13.       </nav>
14.       <Switch>
15.         <Route exact path="/" component={Home} />
16.         <Route path="/about" component={About} />
17.       </Switch>
18.     </Router>
19.   );
20. }
22. export default App;

复制代码

3.2 动态路由

1. import React from 'react';
2. import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';
4. const Post = () => {
5.   const { id } = useParams(); // 获取动态路由的参数
6.   return <div>Post ID: {id}</div>;
7. };
9. function App() {
10.   return (
11.     <Router>
12.       <nav>
13.         <Link to="/post/1">Post 1</Link>
14.         <Link to="/post/2">Post 2</Link>
15.       </nav>
16.       <Route path="/post/:id" component={Post} />
17.     </Router>
18.   );
19. }
21. export default App;

复制代码

3.3 编程式导航 (React Router v6)

1. import React from 'react';
2. import { useNavigate } from 'react-router-dom';
4. const Home = () => {
5.   const navigate = useNavigate();
7.   const handleClick = () => {
8.     navigate('/about');
9.   };
11.   return (
12.     <div>
13.       <h1>Home</h1>
14.       <button onClick={handleClick}>Go to About</button>
15.     </div>
16.   );
17. };
19. export default Home;

复制代码

3.4 嵌套路由

1. import React from 'react';
2. import { BrowserRouter as Router, Route, Link, Outlet } from 'react-router-dom';
4. const Dashboard = () => (
5.   <div>
6.     <h2>Dashboard</h2>
7.     <nav>
8.       <Link to="settings">Settings</Link>
9.     </nav>
10.     <Outlet /> {/* 渲染嵌套路由的占位符 */}
11.   </div>
12. );
14. const Settings = () => <div>Settings Page</div>;
16. function App() {
17.   return (
18.     <Router>
19.       <Route path="dashboard" element={<Dashboard />}>
20.         <Route path="settings" element={<Settings />} />
21.       </Route>
22.     </Router>
23.   );
24. }
26. export default App;

复制代码

7. 高级用法实战

4.1 路由重定向

• Redirect（v5）/ Navigate（v6）
  

v5：

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

复制代码

v6：

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

复制代码

4.2 路由守卫（保护路由）

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

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

复制代码

4.3 通过 useLocation 获取当前 URL

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

复制代码

4.4 动态加载组件

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

1. import React, { Suspense, lazy } from 'react';
2. import { BrowserRouter as Router, Route } from 'react-router-dom';
4. const LazyHome = lazy(() => import('./Home'));
6. function App() {
7.   return (
8.     <Router>
9.       <Suspense fallback={<div>Loading...</div>}>
10.         <Route path="/" component={LazyHome} />
11.       </Suspense>
12.     </Router>
13.   );
14. }

复制代码

8. React Router 底层焦点原理

   8.1 焦点原理
  

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

  8.2 关键步调
  

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

  React Router 底层的焦点原理围绕着以下几个关键点：

• 路由匹配：通过 URL 路径与路由设置举行匹配，决定渲染哪个组件。
  
• history API：通过监听浏览器的历史记载来管理路由变革。
  
• 虚拟 DOM 更新：通过 React 的更新机制，在路由变革时高效
  

地更新组件。

• 嵌套路由：通过 Outlet 组件来支持父子路由的嵌套渲染。
  
• 优化渲染：只重新渲染必要更新的组件，提升性能。
  

明白这些底层原理，能够资助你更好地使用 React Router，并且在碰到复杂路由需求时，能够更机动地调整和优化路由设置。
总结

React Router 是构建 React 应用的路由管理工具，具有强大的功能，如支持动态路由、嵌套路由、导航守卫、代码分割等。明白其焦点概念及高级用法，可以资助开发者更高效地构建和维护复杂的 React 应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。