[React] React Router: Router, Route, and Link
In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.
import React from 'react';
import {hashHistory, Route, Router, Link} from 'react-router'; const Home = () => <div><h1>Home</h1><Links></Links></div>;
const About = () => <div><h1>About</h1><Links></Links></div>;
const Contact = () => <div><h1>Contact</h1><Links></Links></div>; const Links = () =>
<nav >
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>; class App extends React.Component {
render(){
return(
<Router history={hashHistory}>
<Route path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>
</Router>
);
}
} export default App;
[React] React Router: Router, Route, and Link的更多相关文章
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route
In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...
- 理解OpenShift(1):网络之 Router 和 Route
理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...
- [Angular2 Router] Resolving route data in Angular 2
From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know ...
- vue中的router和route有什么区别?
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
- Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- 浅谈vue$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
随机推荐
- (转)XML CDATA是什么?
解析数据 XML 解析器通常情况下会处理XML文档中的所有文本. 当XML元素被解析的时候,XML元素内部的文本也会被解析: <message>This text is also pars ...
- PHP对表单提交特殊字符的过滤和处理
PHP关于表单提交特殊字符的处理方法做个汇总,主要涉及htmlspecialchars/addslashes/stripslashes/strip_tags/mysql_real_escape_str ...
- CodeIgniter目录结构
1.1 application 是你自己的项目存放文件的目录(控制器.模型和视图等!) (1)分析application文件夹中的目录 (1.1) cache文件是放缓存文件 (1 ...
- linux性能分析命令top
发布时间: 2013-12-14浏览次数:154分类: 服务器 top是linux最常用的性能分析工具了,它是个交互式工具,提供系统的整体性能,如正在执行的进程信息包括进程ID,内存占用率,CPU占用 ...
- Android Studio中新建项目时Your android sdk is out of date or is missing templates的解决办法
在Android Studio中新建项目时出现了以下问题:Your android sdk is out of date or is missing templates. Please ensure ...
- 启用DHCP中继代理,实现跨子网服务 - Win 2003 Server
伴随着局域网规模的逐步扩大,一个网络常常会被划分成多个不同的子网,以便根据不同子网的工作要求来实现个性化的管理要求.考虑到规模较大的局域网一般会使用DHCP服务器来为各个工作站分配IP地址,不过一旦局 ...
- java rmi 小记
最近在搞Quartz任务监控管理,碰到了jmx,后来发现Quartz对jmx的支持不是很好,介绍的文档也比较少,另外Quartz可以很方便的支持rmi于是就看了一下rmi.下面把写的一些测试小例子附上 ...
- 修复 status 为 unusable 的 index
以DBA权限登陆,执行以下脚本即可. declare -- 指向所有 UNUSABLE 状态的 index 的游标 cursor c is select index_n ...
- 堆/栈的比较 以及 malloc/new动态内存的开辟
堆与栈的比较:1.申请方式(1)栈(satck):由系统自动分配.(2)堆(heap):需程序员自己申请(c:调用malloc,realloc,calloc申请 free 来释放),并指明大小,并由程 ...
- Axure自动幻灯片制作
1.打开axure7,开始. 2.拖一个占位符组件到布局上(当然也可以是矩形.图片之类的),大小270*170,作为幻灯片的第一张片子,双击写上“第一张片子”. 3.拖一个矩形,设置形状为椭圆,调整大 ...