React Router 基础教程
React Router 是一个功能强大的库，用于在 React 应用中实现路由功能。它允许开发者定义应用内的路由，并管理不同视图或组件间的导航。通过处理动态路由和基于 URL 的导航，React Router 简化了单页应用 (SPA) 的创建。
React Router 核心概念
路由 (Route): 应用内从一个 URL 导航到另一个 URL 的过程。 单页应用 (SPA): React Router 专为 SPA 设计，应用只加载一次，用户导航时只更新部分页面内容。React Router 核心组件
BrowserRouter (或 HashRouter): 用于管理路由逻辑的容器组件，启用导航功能。 BrowserRouter 使用 HTML5 History API 操作浏览器 URL 并保持 UI 同步。 对于不支持 HTML5 History API 的旧浏览器，可以使用 HashRouter (基于哈希的路由)。示例:
1
2
3
4
5
6
7
import { BrowserRouter } from react-router-dom;
const App = () => {
return (
<BrowserRouter><Routes /></BrowserRouter>
);
};
示例:
1
2
3
4
5
6
7
8
9
10
import { Routes, Route } from react-router-dom;
const RoutesComponent = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
};
示例:
1
<Route path="/" element={<Home />} />
示例:
1
2
3
4
5
6
7
8
9
10
import { Link } from react-router-dom;
const Navigation = () => {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
};
示例:
1
2
3
4
5
6
7
8
9
10
11
12
import { useNavigate } from react-router-dom;
const Login = () => {
const navigate = useNavigate();
const handleLogin = () => {
// 登录逻辑
navigate(/dashboard);
};
return <button onClick={handleLogin}>登录</button>;
};
基本路由示例
一个在函数式 React 应用中演示 React Router 基本用法的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from react;
import { BrowserRouter, Routes, Route, Link } from react-router-dom;
const Home = () => <h2>主页</h2>;
const About = () => <h2>关于页</h2>;
const Contact = () => <h2>联系页</h2>;
const App = () => {
return (
<browserrouter>
<div>
<nav>
<ul>
<li><link to="/">主页</li>
<li><link to="/about">关于页</li>
<li><link to="/contact">联系页</li>
</ul>
</nav>
<routes>
<Route path="/" element={<Home />} />
<route path="/about" element="{<About">} />
<route path="/contact" element="{<Contact">} />
</route></route></routes>
</div>
</browserrouter>
);
};
export default App;
说明:
BrowserRouter 组件包裹整个应用以启用路由。 Link 组件创建不会触发页面重新加载的导航链接。 Routes 组件包含所有路由，每个 Route 元素将 URL 路径映射到组件 (例如，Home、About 或 Contact)。 点击链接会更新 URL 并渲染相应的组件。嵌套路由
React Router 也支持嵌套路由，允许在其他路由内定义路由。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// ... (省略部分代码，与上一个示例类似)
const Dashboard = () => (
<div>
<h2>仪表盘</h2>
<nav>
<link to="profile">个人资料
<link to="settings">设置
</nav>
<routes>
<route path="profile" element="{<h3">个人资料页面} />
<route path="settings" element="{<h3">设置页面} />
</route></route></routes>
</div>
);
const App = () => {
return (
<browserrouter>
<routes>
<Route path="/" element={<Home />} />
<route path="/dashboard/*" element="{<Dashboard">} />
</route></routes>
</browserrouter>
);
};
// ... (省略部分代码)
说明:
/dashboard 路由有嵌套路由：/dashboard/profile 和 /dashboard/settings。 通过在父路由中使用 * 通配符 (path="/dashboard/*")，React Router 知道在 Dashboard 组件内部渲染子路由。使用 useNavigate 重定向
可以使用 useNavigate 钩子以编程方式将用户重定向到不同的路由。
1
2
3
4
5
6
7
8
import { useNavigate } from react-router-dom;
const RedirectComponent = () => {
const navigate = useNavigate();
// 将用户重定向到另一个路由
navigate(/about);
return null; // 返回 null 避免渲染任何内容
};
说明:
RedirectComponent 组件渲染时会自动将用户重定向到 /about 路由。路由参数
通过包含路由参数定义动态路由，这些参数可以在 URL 中传递值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from react;
import { BrowserRouter, Routes, Route, useParams } from react-router-dom;
const UserProfile = () => {
const { userId } = useParams();
return <h2>用户资料：{userId}</h2>;
};
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/user/:userId" element={<UserProfile />} />
</Routes>
</BrowserRouter>
);
};
export default App;
说明:
路由路径中的 :userId 是一个路由参数。 useParams 钩子在 UserProfile 组件内部使用，从 URL 中提取 userId 的值并在页面上显示。总结
React Router 简化了 React 应用中视图间导航，提高了效率。BrowserRouter、Route、Link 等组件以及 useNavigate 等钩子，可以创建具有复杂路由逻辑的动态单页应用。掌握 React Router 基础知识，包括路由处理、嵌套路由和路由参数，可以轻松管理 React 应用的导航。