react.js从入门到精通(六)——路由的使用
对路由的理解
在pc端页面之间的切换,我们大多使用a链接、location等操作。
在react.js开发中,我们采用组件化操作,一个页面就是一个组件。所以页面和页面之间的跳转就相当于是组件和组件之间的跳转。
我们知道react.js是一种单页面项目开发,就是在一个主页面的基础上存放各种子页面。这就好像一根网线连接路由器,而路由器能分出很多根网线连接大量的电脑。所以我们将单页面项目的页面跳转称为路由。
在第一篇放出的框架中,我们介绍过专门用来管理路由的文件——routes.js文件。
1、使用Link进行路由跳转
(1)routes.js中的配置
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import MyScreen from './containers/MyScreen'; import { App, Home, } from './containers' export default ( <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="my"> <IndexRoute component={MyScreen}/> </Route> </Route> );
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
注意:这里需要使用react-router功能模块,一般都是框架中自带的,如果没有可使用npm进行下载使用(第一篇分享的框架的package.json中已经囊括了常用的功能资源)。
(2)Home.js中的代码
import React,{ Component } from 'react'
import MyScreen from "./MyScreen";
import { Link } from 'react-router'
class Home extends Component { constructor(props) { super(props); this.state = { }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <Link to="/my"> <div id="div1" style={{width:"100%",height:"100px",backgroundColor:"#ff0",lineHeight:"100px",textAlign:"center"}}>点击跳转</div> </Link> </div> ) } } export default Home
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
(3)MyScreen.js中的代码:
import React,{ Component } from 'react'
class MyScreen extends Component { constructor(props) { super(props); this.state = { }; } render() { return ( <div style={{width:"100%",height:document.documentElement.clientHeight,fontSize:"12px",backgroundColor:"#0ff",textAlign:"center",lineHeight:"100px"}} onClick={()=>this.click()}> 这是MyScreen界面 </div> ) } click=()=>{ alert("点击到了!!!!"); }; } export default MyScreen
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
2、使用push的方式进行路由跳转
这一种相对于Link方法更加常用。
Home.js代码
import React,{ Component } from 'react'
import MyScreen from "./MyScreen";
import { Link } from 'react-router'
class Home extends Component { static contextTypes = { router: React.PropTypes.object }; constructor(props) { super(props); this.state = { }; } render() { return ( <div style={{width:"100%",height:"300px",fontSize:"20px"}}> <div id="div1" style={{width:"100%",height:"100px",backgroundColor:"#ff0",lineHeight:"100px",textAlign:"center"}} onClick={()=>this.click()}>点击跳转</div> </div> ) } click=()=>{ this.context.router.push("/my"); }; } export default Home
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
下面这种方法,首先要增加静态变量,里面进行路由的一些配置。然后直接通过.router.push进行调用。其他两个文件与上面的一样,不加修改。
转载于:https://www.cnblogs.com/xukun588/p/9458725.html
react.js从入门到精通(六)——路由的使用相关推荐
- react.js从入门到精通(一)
web端三大框架react.vue和angular,下面是对react.js的一些总结. 一.环境搭建 1.npm搭建项目 推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(c ...
- 视频教程-最新完整react教程从入门到精通包教包会-ReactJS
最新完整react教程从入门到精通包教包会 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客 ...
- 前端-Vue.js从入门到精通基础笔记(理论+实操+知识点速查)
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言 本文完全基于 参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- 【JS从入门到精通】08-构造函数与原型对象
笔记来源:尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩_bilibili 文章目录 构造函数与原型对象 1.使用工厂方法创建对象 2.构造函数 构 ...
- Kali Linux 从入门到精通(六)-基本工具使用
Kali Linux 从入门到精通(六)-基本工具使用 基本工具 常用工具: 经常使用且功能强大 安全从业者必不可少的帮手 Nc/ncat Wireshark Tcpdump NETCAT-NC(瑞士 ...
- js 移动端 滑块验证码插件_VUE技术详解,Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- React.js 基础入门四--要点总结
JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想 ...
- 【尚硅谷】Vue.js从入门到精通笔记
目录 第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...
最新文章
- 手动配置linux(centos)的IP地址
- oracle 11g数据库启动错误总结
- r语言清除变量_R语言(1)初识与数据结构
- 设置datalist 中option的宽度_Flutter中http请求抓包的完美解决方案
- linux操作系统原理_Linux系统从新手到运维老鸟学习指南
- 帮人取款每百元抽10元回扣,最终涉嫌诈骗罪被批捕
- vue.js ui_UI / UX开发:考虑Vue.js
- 发送手机验证码通过调用第三方网易云信API(flask项目)
- java飞行记录器是什么_运行java飞行记录器JFR(java flight recorder)
- 全网首发:gpg: gpg-agent 在此次会话中无法使用的解决办法
- Tapestry中listener监听方法传递参数的方式
- 【Pix4d精品教程】Pix4d项目空三结果精度评估完整解决方案(建议收藏)
- 如何制作一个简单的APP应用软件?
- 如何进入DOS系统 | 常用DOS系统命令
- 求解一元二次方程的根
- python如何让文字竖排输出_html中如何让文字竖排显示?总结实现文字竖排样式的多种方法...
- 力扣刷题 DAY_73 回溯
- 大专毕业C/C++零基础学编程难吗?多久能就业?
- VSCode正则表达式搜索
- 语义分割系列6-Unet++(pytorch实现)