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. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  2. 使用docker搭建OpenResty开发环境

    Dockerfile文件: FROM centos:latest RUN yum install -y pcre-devel openssl-devel gcc curl wget perl make ...

  3. Cannot assign to read only property 'exports' of object at webpack ....BaseClient

    网上找了很多资料说是import和export不能一起用,改代码 其实根本原因是es6和es5混合使用造成的兼容性问题 只需要配置.babelrc就可以了 首先安装 npm install -D tr ...

  4. Python 之subprocess模块

    Python subprocess模块运行python的时候,我们都是在创建并运行一个进程.像Linux进程那样,一个进程可以fork一个子进程,并让这个子进程exec另外一个程序.在Python中, ...

  5. JavaJDBC【五、事务】

    概念: 事务(Transaction)作为单个逻辑工作单元执行的一系列操作. 这些操作都是作为一个整体一起向系统提交,要么都执行,要么都不执行. 特点: 原子性:一个完整操作. 一致性:当事务完成时, ...

  6. php使用rdkafka进行消费

    如仅作为消费者或生产者,直接使用下面消费者或生产者的代码,并安装扩展即可. PHP要安装rdkafka扩展,而rdkafka又依赖librdkafka,因此你需要安装rdkafka和librdkafk ...

  7. Pythonic定义

    Pythonic定义 Python最常用的编码风格还是PEP8,详见:http://jython.cn/dev/peps/pep-0008/ Pythonic确实很难定义,先简单引用下<Pyth ...

  8. Oracle子句【group by、having】

    [分组查询]关键字:group by 分组字段名,分组字段名... --注意1:分组后,在select语句中只允许出现分组字段和多行函数 --注意2:如果是多字段分组,先按第一字段分组,然后每个小组继 ...

  9. [转] - Linux中使用alternatives切换Jdk版本

    1. 准备JDK包,分别是1.7和1.8,jdk-7u79-linux-x64.tar.gz和jdk-8u161-linux-x64.gz: 2. 解压,解压后的目录结构如图所示: JDK1.7: J ...

  10. TP5通用化API接口数据封装

    之前在做项目的时候,特别是最近总是再使用前后端分离模式,向客户端提供接口,每次都傻不拉几的 在每一个方法里面 写 $data = ['status'=>1,'message'=>'XXX' ...