react-router

早期是凭借多个页面借助a标签实现路由的跳转,也就是多页面编程,n个导航对应n个html.
所以spa 应运而生。单页面多组件

路由的工作原理【一种映射关系 路径--组件】

  1. 一开始的地址是没有参数的
  2. 点击路由连接后,页面并不会发生跳转。并且路由会修改浏览器的地址
  3. 路由中检测浏览器的路径(参数)变化(这里是会忽略前面的ip 以及port)匹配组件参数,展示相应的组件
    路由监测的实现: 得益于history对象 浏览器历史记录

    我们一般不会直接去操作这个window.history 去操作浏览器的路径 历史记录的修改以及替换 因为原生的api不好用 so
    借助一个库history.js 这个创建的history对象本质也是操作了bom的history
    history.push/forward/go/back/replace

history: HASH(# 兼容性好) browser

react-router 库其实有三种实现 适用于三种平台 web(dom) native(原生) anywhere(api 过多)

router: 路由器 管理路由
route: 路由(接口 天线)

  1. LINK ROUTE 组件需要包裹在路由器Router内 BrowseRouter 或 HashRouter 必须被路由器所管理 而且只能是一个 多个路由器之间是独立的
  2. link 中的to的属性值最好是小写的 因为不区分大小写
  3. 路由链接link 本质是a标签 作用就是点击后修改地址栏路径 浏览器的历史记录就会工作 当路径变化就会匹配组件

1) tnpm i react-router-dom

原生写react

  1. 复杂需要多个html 引入各种react文件 编码慢
  2. 通过js修改为jsx的形式依靠浏览器babel 翻译 代码过多浏览器忙不过来
    使用cli 简单快速搭建react 应用 cli是webpeck 搭建的,他有好多loader plugins 由很多功能‘
  3. 安装脚手架 create-react-app库帮助你安装cli
  4. 创建项目 create-react-app 项目名
  5. 启动 npm start
    webpeck 官方把关于react的配置文件隐藏了 执行eject 会暴露处所有的配置文件并且回不去了

cli:

网络请求。react中不建议使用jquery 因为他注重的是操作原生dom 而 react是不关注视图层的
axios: Q轻量 可运行在服务端 支持promise 本质就是xmlHttpRequest对象的封装
全局安装后引用报错

你可能感兴趣的:(react-router4)