博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react路由
阅读量:5299 次
发布时间:2019-06-14

本文共 576 字,大约阅读时间需要 1 分钟。

react路由

  react 提供了实现路由的方式,不过需要我们下载插件 react-router-dom 

  当我们下载好了插件,然后我们可以通过 import {} from 'react-router-dom' 来引入路由标签;

  如图,我们可以看到在实现项目中的使用方法  Router.js

  

 

   我们在全局组件中引入我们配好的 Router 的组件,  App.js

  

 

 

  接下来我们可以在 App 最大的组件上的任何位置,都能使用路由跳转;

  通过标签的跳转方式: < a href="#/home" >  主页  </a> ,这样我们点击 a 标签的主页时,就能跳转到 home 组件

   场景使用 Foots.js

  

 

   

这样我们就能使用了

  以上我们是使用 标签的跳转方式,然后我们还可以使用函数的跳转方式;

  当我们将组件的内容配好的时候,这个时候我们的组件 (this) 的 props 中就会多了几个属性,其中 history 中便拥有了 push 的方法,

  我们就可以用它来 实现跳转。

  在 home.js 中

  

 

   这样我们在另一个组件 detail 中查看,我们传递的数据

  

 

转载于:https://www.cnblogs.com/only--love/p/11574101.html

你可能感兴趣的文章
Linq 学习(1) Group & Join--网摘
查看>>
asp.net 调用前台JS调用后台,后台掉前台JS
查看>>
Attribute(特性)与AOP
查看>>
苹果手表:大方向和谷歌一样,硬件分道扬镳
查看>>
Competing Consumers Pattern (竞争消费者模式)
查看>>
Android面试收集录15 Android Bitmap压缩策略
查看>>
PHP魔术方法之__call与__callStatic方法
查看>>
ubuntu 安装后的配置
查看>>
web前端之路,js的一些好书(摘自聂微东 )
查看>>
【模板】对拍程序
查看>>
【转】redo与undo
查看>>
解决升级系统导致的 curl: (48) An unknown option was passed in to libcurl
查看>>
Java Session 介绍;
查看>>
spoj TBATTLE 质因数分解+二分
查看>>
Django 模型层
查看>>
dedecms讲解-arc.listview.class.php分析,列表页展示
查看>>
Extjs6 经典版 combo下拉框数据的使用及动态传参
查看>>
【NodeJS】http-server.cmd
查看>>
研磨JavaScript系列(五):奇妙的对象
查看>>
面试题2
查看>>