React第三方组件1(路由管理之Router的使用①简单使用)
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
今天我们讲下react-router,首先放出它的官网地址:
https://reacttraining.com/react-router/web/guides/philosophy
我们废话不多,直接进入示列!
先来看下我们之前的文件
大家可能会奇怪为什么每个Index.jsx文件,都这么写,其实你可以不这么写,我只是为了预留给将来用react-router使用!
1.首先加入依赖
这里我们用到的是 react-router-dom
npm i -S react-router-dom
2.引入这个react-router-dom
import {HashRouter, Route, NavLink} from 'react-router-dom'
HashRouter, Route, NavLink 这些含义大家查官网,或者百度,网上有很多资料,我只讲怎么用!
3.设置路由,我们把shop、 demo1、demo2这三个页面引入
import Shop from '../shop/Index';
import demo1 from '../demo/demo1/Index';
import demo2 from '../demo/demo2/Index';
4.具体义务代码
const Index = () =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/" activeClassName="selected" exact>首页</NavLink>
<NavLink to="/Shop" activeClassName="selected" exact>商城</NavLink>
<NavLink to="/demo1" activeClassName="selected" exact>demo1</NavLink>
<NavLink to="/demo2" activeClassName="selected" exact>demo2</NavLink>
</div>
<Route exact path="/" component={() => <Seconds title="首页"/>}/>
<Route path="/Shop" component={Shop}/>
<Route path="/demo1" component={demo1}/>
<Route path="/demo2" component={demo2}/>
</div>
</HashRouter>
;
这里要简单讲下:
<NavLink to="/" activeClassName="selected" exact>首页</NavLink>
NavLink:渲染后会被转化程a链接
to:就是跳转页面地址
activeClassName:就是链接和当前页面理由一致后会使用这个样式。
exact :精确匹配
如果你的组件需要传值,就得返回这个组件:
<Route exact path="/" component={() => <Seconds title="首页"/>}/>
不需要传值的就直接这样写:
<Route path="/Shop" component={Shop}/>
5.添加样式
修改 index.pcss
.nav {
a{
margin-right: 10px;
color: blue;
&.selected{
color: #f00000;
}
}
}
6.测试
- 使用json 和jQuery制作级联dropdownlist
- 在64位Windows 7/2008操作系统上部署32位的Web应用程序错误
- 云计算浪潮
- 2.[Andriod]Andriod Studio结合Visual Studio Emulator for Android调试Android App
- Windows Server AppFabric Caching
- zepto 基础知识(2)
- DeepMind回顾2017年:除了战胜柯洁还有哪些大事
- [认证授权] 1.OAuth2授权
- 机器学习(四)——梯度下降算法解释以及求解
- 在Windows上运行单节点的Cassandra
- Mono技术规格
- 如何站在使用者的角度来设计SDK-微信公众号开发SDK(消息处理)设计之抛砖引玉
- 机器学习(三)——k-近邻算法基础
- 利用Windows性能计数器(PerformanceCounter)监控
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 不可忽视的CSS布局
- 让小黑窗口听你指挥
- Element表单嵌套数据验证
- 摸鱼的新发现,滚动条无限滚动
- 理解装饰器是怎么使用的
- 第十一节:Activiti6.0——定时器开始事件、消息开始事件和错误开始事件介绍
- linux centos 安装mailx邮件服务器并测试发送一封邮件
- 深入分析Vue-Router原理,彻底看穿前端路由
- linux LVM 一键分区脚本自动扩容
- 再谈构造函数、原型、原型链之间的关系
- Java ConcurrentHashMap 高并发安全实现原理解析
- 第十二节:Activiti6.0——四种边界事件:定时器、错误、信号、补偿
- parted 磁盘分区-挂载-删除-shell脚本进行磁盘分区
- Ubuntu18.04——安装MySQL
- 八种 Vue 组件间通讯方式合集