react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

#课程目标

1. 理解路由的原理及应运
2. 理解react-router-dom以及内置的一些组件
3. 合理应用内置组件及其属性搭建项目路由

#知识点

1. 路由的由来

• 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。这是从路由的用途上来解释路由是什么的，还有一种说法是：路由就是URL到函数的映射。

  1-1. hash => 路由的实现就是基于location.hash来实现的。其实现原理也很简单，location.hash的值就是URL中#后面的内容

  <a href="#/">主页</a>
  <a href="#/home">home</a>
  <a href="#/index">index</a>
  <div id='content'></div>
  <script>
  /*
   URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送。hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。我们可以使用hashchange事件来监听hash的变化。
   */
      class Router{
          constructor({routes}) {
              this.routes = routes;
              this.everyPath = {};
              this.init();
              this.routes.forEach(item => {
                  this.everyPath[item.path] = function() {
                      document.getElementById('content').innerHTML = item.component;
                  }
              })
          }
          init() {
              window.addEventListener('load', this.updateLocation.bind(this))
              window.addEventListener('hashchange', this.updateLocation.bind(this))
          }
          updateLocation() {
              let pathRes = window.location.hash.slice(1);
              console.log(this.everyPath, '----', pathRes)
              this.everyPath[pathRes]();
          }
      }
      new Router({
          routes: [
              {
                  path: '/',
                  component: '主页'
              },
              {
                  path: '/home',
                  component: 'home'
              },
              {
                  path: '/index',
                  component: 'index'
              }
          ]
      })
  </script>
  

   

  1-2. history => 前面的hash虽然也很不错，但使用时都需要加上#，并不是很美观。因此到了HTML5，又提供了History API来实现URL的变化。其中做最主要的API有以下两个：history.pushState()和history.repalceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

  <a href="javascript:;" data-to='/'>去首页</a>
  <a href="javascript:;" data-to='/home'>去home页</a>
  <a href="javascript:;" data-to='/index'>去index页</a>
  <div id="content"></div>
  <script>
      class Router{
          constructor({routes}) {
             this.router = routes;
             this.init()
             this.bindClick();
          }
          init() {
              window.addEventListener('popstate', this.updateView.bind(this));
          }
          updateView() {
              let content = document.getElementById('content');
              let clickRes = window.location.pathname
              content.innerHTML = this.router.filter(val => val.path === clickRes)[0].component;
          }
          bindClick() {
              let pushA = document.querySelectorAll('a');
              [].forEach.call(pushA, item => {
                  item.addEventListener('click', () => {
                      let clickRes = item.getAttribute('data-to');
                      window.history.pushState({}, null, clickRes)
                      this.updateView()
                  })
              })
          }
      }
      new Router({
          routes: [
              {
                  path: '/',
                  component: '主页'
              },
              {
                  path: '/home',
                  component: 'home'
              },
              {
                  path: '/index',
                  component: 'index'
              }
          ]
      })
      // 1.状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。
      // 2.标题（title）：一般浏览器会忽略，最好传入null。
      // 3. 地址（URL）：就是需要新增的历史记录的地址，浏览器不会去直接加载改地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前URL应该是同源的。
  </script>
  
  

   

  1-3. 两种实现方式的对比：基于Hash的路由实现，兼容性更好；而基于History API的路由，则更正式，更美观，可以设置与当前URL同源的任意URL，路径更直观。此外，基于Hash的路由不需要对服务器做改动，基于History API的路由需要对服务器做一些改造，需要对不同的路由进行相应的处理才行（404）。

2. 相应的内置组件

   2-1. BrowserRouter

   • basename: 该router下路由路径的base url. 应该有一个前置斜杠，但不能有后置斜杠。如果你的页面路由路径为某个子目录，那base url应设置为这个子目录。该页面的其他路由路径即在这个之下。

           <BrowserRouter basename="/calendar"/>
           <Link to="/today"/> // renders <a href="/calendar/today">
   

    

   2-2. HashRouter

   • 与BrowserRouter一致

   2-3. Link

   • to: string, 路由链接， 由location的path, search, hash属性拼接而成。

   • to : object { pathname: 跳转路径，search: 查询参数， hash: url中的hash, eg. #a-hash, state:存储到location中的额外状态数据}

   • replace: 布尔值- 为true时，将会替换history stack中的当前路径

   2-4. NavLink

   • activeClassName: string, 渲染样式

   • activeStyle:object, 渲染样式

   2-5. Redirect

   • to: string, url地址

   • to: object, location object, 属性有：pathname: 跳转路径，search: 查询参数， hash: url中的hash, eg. #a-hash, state:存储到location中的额外状态数据. location中的state可以在redirect跳转组件的this.props.location.state访问

   • push: 为true表示redirect path将往history stack中推一条新数据而不是替换他

   • from: redirect from url, 会进行正则匹配。只能用在

   • component: 当传递component渲染UI时，router将会用React.createElement来将组件封装成一个新的React element, 当传递一个inline func, react每次render都会unmount, mount一个新的组件，会消耗性能，此时可以使用render/children prop

   • render: func, inline func不会有上述性能问题，参数同route props相同

   2-7. Switch

   • 渲染或中第一个匹配location的组件，且子元素只能为或

#授课思路

#案例和作业

1. 高度还原页面
2. 利用react-router-dom搭建整个项目的路由