中级第 15 / 17 节40 分钟 · 实操
使用 React Router 进行路由
React 课程的一部分
到目前为止你写出来的东西都待在同一个地址上。整个应用只有一个页面,想让用户看到什么,就用状态把它显示出来或藏起来。这样做能撑一阵子,直到有人想把设置界面收藏成书签,或者想把某一个用户的链接发给同事,又或者按下浏览器的后退按钮却没有回到自己预期的位置。一个不理会地址栏的网页应用,等于白白丢掉了每个用户早就会用的那项功能。
单页应用 (single-page app) 在页面之间移动时不会重新加载整个页面。浏览器只下载一次 JavaScript,之后切换界面就只是 React 渲染了不同的组件而已。但地址仍然应该跟着变,后退按钮仍然应该管用,直接输入一个地址也仍然应该落到正确的位置。把这两边接起来,一边是地址栏,一边是你的组件,这件事叫做路由 (routing)。
想在真实环境里学习 React 使用 React Router 进行路由 吗?
点击下方,立即获得一台预装 React 的 Linux 主机,跟懂你代码的 AI 导师一起完成 使用 React Router 进行路由 的实操练习。
开始这节课使用 React Router 进行路由你将学到什么
- Installing react-router-dom
- BrowserRouter
- Routes and Route
- Link for navigation
- UseParams
- UseNavigate
用你的语言阅读本课
本课程的所有课时
17 节- 1什么是 React?25 分钟
- 2JSX 与组件 (Components)30 分钟
- 3属性 (Props)30 分钟
- 4使用 useState 管理状态 (State)35 分钟
- 5处理事件30 分钟
- 6条件渲染与列表30 分钟
- 7表单与受控输入 (Controlled Inputs)35 分钟
- 8使用 useEffect 实现副作用 (Effects)40 分钟
- 9数据获取40 分钟
- 10组件组合 (Component Composition)35 分钟
- 11Context 与 useContext35 分钟
- 12useReducer35 分钟
- 13自定义钩子 (Hooks)35 分钟
- 14性能与记忆化 (Memoization)35 分钟
- 15使用 React Router 进行路由40 分钟
- 16测试 React 组件 (Components)40 分钟
- 17顶点项目:待办事项应用60 分钟
探索其他课程
Python
19 节 · 9.3小时
Go
20 节 · 12.3小时
Linux
17 节 · 8.5小时
Docker
13 节 · 6.6小时
Git
13 节 · 5.9小时
Kubernetes
14 节 · 8小时
Ansible
12 节 · 6.1小时
Bash
12 节 · 5.7小时
Helm
10 节 · 5.4小时
GitLab CI
11 节 · 5.8小时
Jenkins
11 节 · 5.3小时
PostgreSQL
14 节 · 7.6小时
MySQL
13 节 · 6.8小时
Web
14 节 · 5.9小时
TypeScript
18 节 · 7.7小时
Vibe Coding
12 节 · 5.8小时
Prompt Engineering
11 节 · 6.2小时
Vibe 编程:基础
12 节 · 4.5小时
Vibe 编程:从原型到生产
12 节 · 5.5小时
Vibe 编程:多智能体工程
12 节 · 5.3小时
Vibe 编程:高级工程
12 节 · 7.3小时
