前端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 = 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 渲染匹配的组件。
React Router 底层的焦点原理围绕着以下几个关键点：
[*]路由匹配：通过 URL 路径与路由设置举行匹配，决定渲染哪个组件。
[*]history API：通过监听浏览器的历史记载来管理路由变革。
[*]虚拟 DOM 更新：通过 React 的更新机制，在路由变革时高效
地更新组件。
[*]嵌套路由：通过 Outlet 组件来支持父子路由的嵌套渲染。
[*]优化渲染：只重新渲染必要更新的组件，提升性能。
明白这些底层原理，能够资助你更好地使用 React Router，并且在碰到复杂路由需求时，能够更机动地调整和优化路由设置。
总结
React Router 是构建 React 应用的路由管理工具，具有强大的功能，如支持动态路由、嵌套路由、导航守卫、代码分割等。明白其焦点概念及高级用法，可以资助开发者更高效地构建和维护复杂的 React 应用。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]