首页 > 其他 > 详细

React-router-dom 路由

时间:2019-09-23 21:26:59      阅读:112      评论:0      收藏:0      [点我收藏+]

1. 下载npm install react-router-dom --save-dev

2. 基本操作 

  (1)路由  detail.js

      技术分享图片

  (2) 配置路由

      引入路由组件:import {HashRouter,Route,Switch} from ‘react-router-dom‘;

      技术分享图片

      1.HashRouter 凡事路由组件上面都有一个顶层标签,决定跳转的方式

        HashRouter     hash 模式
        BrowserRouter  history模式

      2.Switch  切换路由,在这几个组件中来回切换

      3. Route  组件跳转的路径

   (3.)挂载  

      技术分享图片

 

 3. 通过a标签跳转

     技术分享图片

 

4. 通过函数跳转  

     技术分享图片

 

通过this.props.history.push这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props中去,然后就可以在子组件中通过props调用history的push方法跳转页面。

React-router-dom 路由

原文:https://www.cnblogs.com/liancai001/p/11574714.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!