路由

  1. 单页应用页面切换；
  2. 通过URL定位到页面；

  3. 语义的组织资源。

    路由实现的基本架构

    image.png
    唯一标识的路由定义，通过Router更新到组件容器中。

    特性

  4. 生命是路由定义；

  5. 动态路由。

    实现方式

  6. URL路径；

  7. hash路由，支持低版本浏览器；

  8. 内存路由，路由不会反映到浏览器URL中。

    基于路由配置进行资源组织

  9. 实现业务逻辑的低耦合；

  10. 易于扩展、重构和维护；

  11. 路由层面实现Lazy Load。

    React Router API

  12. ：普通链接，不会触发浏览器刷新；

  13. ：类似Link，会添加当前选中状态；
  14. ：满足条件时提示用户是否离开当前页面；
  15. ：重定向当前页面（登录跳转）；
  16. ：路由匹配时显示对应组件；

  17. ：只显示第一个匹配的路由；

    通过URL传递参数

  18. 传递参数：；

  19. 获取参数：this.props.match.params；

  20. 正则匹配：path-to-regexp。

    URL参数的使用

  21. 页面状态，URL发生变化，Router会使当前页面刷新；

    嵌套路由

  22. 每个React组件都可以是路由容器；

  23. Router声明式语法可以方便定义嵌套路由；