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 中查看,我们传递的数据

  

  

react 路由的更多相关文章

  1. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  2. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  3. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  4. react路由配置(未完)

    React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...

  5. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  6. react 路由 react-router@3.2.1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

  7. React路由配置

    React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...

  8. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  9. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  10. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

随机推荐

  1. Excel中把图片合并进图表的方法介绍

    方法一: 使用“图案”对话框 双击某个数据系列,选择“图案”标签,单击“填充效果”按钮,在“填充效果”对话框中选择“图片”标签,单击“选择图片”按钮,选择一个要使用的图形文件即可. 方法二: 使用剪贴 ...

  2. ETL 工具和 BI 工具

    ETL是数据仓库中的非常重要的一环,是承前启后的必要的一步.ETL负责将分布的.异构数据源中的数据如关系数据.平面数据文件等抽取到临时中间层后进行清洗.转换.集成,最后加载到数据仓库或数据集市中,成为 ...

  3. 最终章·MySQL从入门到高可用架构报错解决

    1. 报错原因:MySQL的socket文件目录不存在. 解决方法:创建MySQL的socket文件目录 mkdir /application/mysql-5.6.38/tmp 2. 报错原因:soc ...

  4. 《python解释器源码剖析》第10章--python虚拟机中的一般表达式

    10.0 序 上一章中,我们通过PyEval_EvalFrameEx看到了python虚拟机的整体框架,那么这一章我们将深入到PyEval_EvalFrameEx的各个细节当中,深入剖析python的 ...

  5. NORDIC 修改MTU

    https://www.cnblogs.com/jiangjiu/p/10063556.html 注意要修改RAM起始地址,因为MTU增大了

  6. three.js之创建一个几何体

    <html> <head> <title>My first three.js app</title> <style> body { marg ...

  7. 解决Zabbix某台主机突然频繁告警"Zabbix agent on xxxxxx is unreachable for x minutes"

    一.某台主机突然某一天频繁告警zabbix agent不可达 查看zabbix agent日志没有发现异常 二.查看zabbix server日志发现这台主机的日志有大量报错信息"first ...

  8. 内核模式构造-Event构造(WaitLock)

    internal sealed class SimpleWaitLock:IDisposable { //Enter()和Leave()中使用m_AutoResetEvent都将迫使调用线程做用户模式 ...

  9. BZOJ 1692: [Usaco2007 Dec]队列变换 (后缀数组/二分+Hash)

    跟BZOJ 4278: [ONTAK2015]Tasowanie一模一样 SA的做法就是把原串倒过来接在原串后面,O(nlogn)O(nlogn)O(nlogn)做后缀数组,就能O(1)O(1)O(1 ...

  10. macOS Mojave 10.14上安装iTunes12.6

    将一下内容保存为iTunes.scpt,并运行 set question to display dialog "确定是否删除 iTunes ?" buttons {"Ye ...