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 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...
随机推荐
- Day4_迭代器
迭代器: 是一个重复的过程,每一次重复都是基于上一次的结果而来. 可迭代对象: 凡是对象有_iter_方法(对象._iter_),该对象就是可迭代对象. 字符串,列表,元组,字典等都是可迭代对象. 可 ...
- git如何移除某文件夹的版本控制
目录结构如下 project bin lib src ...... 执行如下的操作 git add . git commit -m "add bin/ lib/ src/" git ...
- spring中配置quartz调用两次及项目日志log4j不能每天生成日志解决方法
在quartz中配置了一个方法运行时会连续调用两次,是因为加载两次,只需在tomcat的server.xml中修改配置 <Host name="www.xx.cn" appB ...
- Python_替换当前目录下文件类型
''' 将当前目录的所有扩展名为html的文件重命名为扩展名为htm的文件 方法一 ''' import os file_list=os.listdir('.') for filename in fi ...
- spring事务机制
一.Java动态代理 1.定义 Java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处理. 默认情况下会采用JDK的动态代理实现AOP . 2. ...
- Spring Boot实战笔记(四)-- Spring常用配置(事件Application Event)
一.事件(Application Event) Spring的事件为Bean和Bean之间的消息通信提供了支持.当一个Bean处理完一个任务之后,希望另一个Bean知道并能做相应的处理,这时我们就需要 ...
- mysql 中 character set 与 collation 的理解
character set 和 collation 的是什么? character set, 即字符集. 我们常看到的 utf-8, GB2312, GB18030 都是相互独立的 character ...
- Spring Boot整合Quartz实现定时任务表配置
最近有个小项目要做,spring mvc下的task设置一直不太灵活,因此在Spring Boot上想做到灵活的管理定时任务.需求就是,当项目启动的时候,如果有定时任务则加载进来,生成schedule ...
- 深入Spring Boot:那些注入不了的Spring占位符(${}表达式)
Spring里的占位符 spring里的占位符通常表现的形式是: <bean id="dataSource" destroy-method="close" ...
- Spring Boot 使用 Log4j2
Java 中比较常用的日志工具类,有 Log4j.SLF4j.Commons-logging(简称jcl).Logback.Log4j2(Log4j 升级版).Jdk Logging. Spring ...