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

react 路由的更多相关文章
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- react路由配置(未完)
React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...
- React路由-基础篇
React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...
- react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
- React路由配置
React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...
- 【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
- 我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
- 我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
随机推荐
- java.sql.SQLException: Could not retrieve transaction read-only status from server 问题解决
网上有2种主要说法 第一种 问题描述: java代码在开始事务后,先做了一个查询,再insert,此时会报: java.sql.SQLException: could not ret ...
- 林大妈的CSS知识清单(二)可见格式化模型(内含margin塌陷与浮动闭合的解决方案)
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- day07 类
一.目录 1.模块 2.包 3.isinstance issubclass type 4.方法和函数 5.反射 6.约束 7.继承 8.特殊成员 9.异常处理 补充知识点 10.hashlib模块 1 ...
- html中onclick传的数字不对的原因
在html中数字16位以后传输的时候都是0,改成字符串就可以了
- C# Winform 带水印提示输入框
using System; using System.Drawing; using System.Runtime.InteropServices; using System.Windows.Forms ...
- 8.3.ZooKeeper集群安装配置
1.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式. 单机模式:Zookeeper只运行在一台服务器上,适合测试环境: 伪集群模式:就是在一台物理机上 ...
- golang 数组之间的交集,差集,并集,补集
今天公司需求两个数组之间的差集,类库下不下来,就独立出来了一份,希望读者有用 package model import ( "sort" "sync" ) ty ...
- Windows安装Redis并添加本地自启动服务
概况 在windows本地搭建redis缓存,添加到本地计算机的服务中,保证每次开机自动启动服务. 第一步:下载redis(我的是计算机win10,64位) https://github.com/Mi ...
- js 深浅拷贝 笔记总结
一.js 数据类型 javaScritp的数据类型有:数值类型.字符串类型.布尔类型.null.undefined.对象(数组.正则表达式.日期.函数),大致分成两种:基本数据类型和引用数据类型, 其 ...
- pod denied问题
/Users/xxx/Library/Developer/Xcode/DerivedData/xxx-cdsvdpxrnyrnhshklcylefhdtghq/Build/Intermediates. ...