React从入门到放弃之前奏(5):ReactRouter4
快速入门
安装:npm i -S react-router react-router-dom
GitHub:ReactTraining/react-router
React Router中有三种类型的组件:路由器组件(BrowserRouter),路由匹配组件(Route)和导航组件(Link)。
路由器
每个React Router应用程序的核心应该是一个路由器组件。
对于Web项目,react-router-dom提供BrowserRouter
和HashRouter
路由器。
路由器会包含所有路由组件。需要注意路由器节点下只能一个根节点。
路由匹配组件
Route:
path路径(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
exact精准(bool):为true时,则要求路径与location.pathname必须完全匹配;
strict严格(bool):为true时,有结尾斜线的路径只能匹配有斜线的location.pathname;
strict示例:
路径 | location.pathname | strict | 是否匹配 |
---|---|---|---|
/one/ | /one | true | 否 |
/one/ | /one/ | true | 是 |
/one/ | /one/two | true | 是 |
路由示例:
import {
HashRouter as Router,
Route,
Link,
NavLink,
Switch
} from 'react-router-dom';
import App from './App.js';
function NavBar(){
return (
<Router>
<div>
<Route component={Nav} />
<Switch>
<Route exact path='/' component={() => (<div>hello</div>)} />
<Route path='/app' component={App} />
</Switch>
</div>
</Router>
);
}
导航组件
Link:在应用中,提供导航功能
NavLink:Link的一个特殊版本,当匹配指定URL的时候,会给元素添加style
示例:
<Link to="/profile"/>
<NavLink to="/profile" activeStyle={{color:'red'}}/>
Code Split
使用Router的Code Split(按需加载)依赖webpack(默认支持)、babel-plugin-syntax-dynamic-import和react-loadable。
babel-plugin-syntax-dynamic-import
: 意味着Babel处理时不会做任何额外的转换。该插件只是允许Babel解析动态导入
npm i babel-plugin-syntax-dynamic-import react-loadable -S
.bashrc:
{
"presets": [
"react"
],
"plugins": [
"syntax-dynamic-import"
]
}
代码示例:
import Loadable from 'react-loadable';
function Loading(){
return (
<div> Loading... </div>
)
}
const Clock = Loadable({
loader: () => import('./Clock'),
loading: Loading,
});
export default class LoadableClock extends React.Component {
render() {
return <Clock />;
}
}
React从入门到放弃之前奏(5):ReactRouter4的更多相关文章
- React从入门到放弃之前奏(1):webpack4简介
接触webpack是好久之前的事情了,最近看了下webpack没想到都到4了. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 会创建1个 ...
- React从入门到放弃之前奏(2):React简介
本系列将尽可能使用ES6(ES2015)语法.所以均在上节webpack的基础上做开发. React是Facebook开发的一款JS库,因为基于Virtual DOM,所以响应速度快,以及支持跨平台. ...
- React从入门到放弃之前奏(3):Redux简介
安装 npm i -S redux react-redux redux-devtools 概念 在redux中分为3个对象:Action.Reducer.Store Action 对行为(如用户行为) ...
- React从入门到放弃之前奏(4):Redux中间件
redux 提供了类似后端 Express 的中间件概念. 最适合扩展的是redux中的 store.dispatch 方法,中间件实际就是通过 override redux的store.dispat ...
- 在 2016 年学 JavaScript 是一种什么样的体验?(React从入门到放弃)
jquery 年代 vs 前端模块化 http://blog.csdn.net/offbye/article/details/52793921 ++ 嘿,我最近接到一个 Web 项目,不过老实说,我这 ...
- D3.js从入门到“放弃”指南
前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之 ...
- 一天带你入门到放弃vue.js(一)
写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...
- 小白学 Python 爬虫(28):自动化测试框架 Selenium 从入门到放弃(下)
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
- 小程序框架WePY 从入门到放弃踩坑合集
小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...
随机推荐
- profile bashrc bash_profile之间的区别和联系
profile bashrc bash_profile之间的区别和联系 博客分类: Linux 执行顺序为:/etc/profile -> (~/.bash_profile | ~/.bas ...
- jquery中利用队列依次执行动画
如果有5个隐藏的div,要让它们依次显示,通常的做法是要一个一个嵌套在回调函数里面,这样导致代码看起来非常不直观. $("#div1").slideDown(1000,functi ...
- Mybatis 系列3
系列文章 2 中,我们通过对mybatis源码的简单分析,可看出,在mybatis配置文件中,在configuration根节点下面,可配置properties.typeAliases.plugins ...
- iphone连接电脑itunes之后 C盘突然小很多被占了很多空间
很有可能是你的iTunes开启了自动备份,把iphone上的数据都备份到了电脑上,而默认目录就是在C盘.我们可以找到并删除它,换C盘一个清白. 我的路径参考如下: C:\Users\scc\AppDa ...
- htmlparser 学习
htmlparser 学习系列 htmlparser 使用法使用与详解
- 再探Circuit Breaker之使用Polly
前言 上一篇介绍了使用Steeltoe来处理服务熔断,这篇我们将用Polly来处理服务熔断. 不废话了,直接进正题. 简单的例子 同样先定义一个简单的服务. [Route("api/[con ...
- 0513JS数组遍历、内置方法、训练
一.定义一个数组把其中的偶数取出,组成一个新的数组 var attr = [9,34,80,27,56]; var attr1 = []; for(var i in attr){ if(attr[i] ...
- RedHat Linux下iptables防火墙设置
一般情况下iptables已经包含在Linux发行版中.运行 # iptables --version 来查看系统是否安装iptables 启动iptables:# service iptables ...
- Java中的queue和deque对比详解
队列(queue)简述 队列(queue)是一种常用的数据结构,可以将队列看做是一种特殊的线性表,该结构遵循的先进先出原则.Java中,LinkedList实现了Queue接口,因为LinkedLis ...
- EXCEL解析之终极方法WorkbookFactory
Selenium做自动化测试当然不能避免和Excel打交道. 由于Excel版本的关系,文件扩展名分xls和xlsx, 以往的经验都是使用HSSFWorkbook和XSSFWorkbook来分别处理. ...