React34介绍安装使用react-router

  • 安装react-router
    • npm install react-router-dom  --save
  • 特点
    • 秉承react一切皆组件的思想,路由也是个组件
    • 分布式的配置,分布在你页面的每个角落
    • 包含式配置,可匹配多个路由
 
  • 使用react-router步骤
    • 引入顶层路由组件包裹根组件
                
    • 引入Link组件编写路由导航
      • <Link to="/">首页</Link>
      • path 配置路径
      • component配置路径所对应的组件
      • exact 完全匹配,只有路径完全一致时才匹配。因为react是包含式匹配,可以匹配多个路由,我们可以利用exact进行精准匹配
      • Switch可以取消react路由包含式匹配的机制,相当于每个路由都加上exact的效果。
    • 编写导航配置对应的component组件
  • 示例:
    
    
 
posted @ 2020-01-13 23:31  Godfi  阅读(280)  评论(0编辑  收藏  举报