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

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

  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/diwangkaige/p/11574889.html

你可能感兴趣的文章
iframe详细用法
查看>>
angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)
查看>>
2015生命之旅---南京、南通、上海之行
查看>>
高精度练习之乘法(codevs_3117)
查看>>
小Z爱划水
查看>>
javascript中click和onclick的区别
查看>>
小程序BindTap快速连续点击页面跳转多次
查看>>
什么是架构?有几人说的清楚
查看>>
护士排班06
查看>>
大道至简:软件实践者的思想读后感
查看>>
Kiss MySQL goodbye for development and say hello to HSQLDB
查看>>
Python web多sitemap创建更新解决方案
查看>>
javase基础10
查看>>
Qt Font
查看>>
UILabel设置富文本格式显示
查看>>
[洛谷P3379]【模板】最近公共祖先(LCA)
查看>>
java程序——随机数求和
查看>>
HTML5的浏览器支持方案
查看>>
在Asp.Net MVC中使用Repeater控件
查看>>
应用程序已被安全设置阻止
查看>>