第5天:React路由

  • 以下代码示例的参考代码只提供源码文件夹/src目录下的文件。
  • 静态资源文件夹因为都一样,所以就不提供了,可以点击这里下载public目录
  • *代码的使用:根据步骤3.1.2执行完之后,替换掉相关文件夹即可。

5.1. 相关理解
5.1.1. SPA的理解

  1. 单页Web应用(single page web application,SPA)。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的链接不会刷新页面,只会做页面的局部更新。
  4. 数据都需要通过ajax请求获取, 并在前端异步展现。
    5.1.2. 路由的理解
  5. 什么是路由?
  6. 一个路由就是一个映射关系(key:value)
  7. key为路径, value可能是function或component
  8. 路由分类
  9. 后端路由:
    1) 理解: value是function, 用来处理客户端提交的请求。
    2) 注册路由: router.get(path, function(req, res))
    3) 工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
  10. 前端路由:
    1) 浏览器端路由,value是component,用于展示页面内容。
    2) 注册路由:
    3) 工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
    5.1.3. react-router-dom的理解
  11. react的一个插件库。
  12. 专门用来实现一个SPA应用。
  13. 基于react的项目基本都会用到此库。
    5.2. react-router-dom相关API
    5.2.1. 内置组件

  14. 5.2.2. 其它
  15. history对象
  16. match对象
  17. withRouter函数
    5.3. 基本路由使用
    5.3.1. 效果

5.3.2. 准备

  1. 下载react-router-dom: npm install --save react-router-dom
  2. 引入bootstrap.css: 5.4. 嵌套路由使用
    效果

5.5. 向路由组件传递参数数据
效果

5.6. 多种路由跳转方式
效果

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top