[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 ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
随机推荐
- WCF代理是怎么工作的?用代码说话
1.WCF生成代理的方式 2.WCF代理原理 第一个问题引用 一篇Robin's博文[WCF生成客户端对象方式解析] 讲述了创建客户端服务对象的方法 1.代理构造法 a.开启服务后,添加服务引用 b. ...
- CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
- 关于ASP.Net 4.0的ClientID
我们知道因为在原来的ASP.NET应用程序中使用服务端控件在生成ClientID的时,是很难控制的,特别是在嵌套的控件的时候,比如在多个嵌套Repeater中要控制某一个控件生成的html的ID属性, ...
- php代码结尾不要添加结尾标记
如果文件内容是纯 PHP 代码,最好在文件末尾删除 PHP 结束标记.这可以避免在 PHP 结束标记之后万一意外加入了空格或者换行符,会导致 PHP 开始输出这些空白,而脚本中此时并无输出的意图.
- Windows Server 2008关闭internet explorer增强的安全配置
服务器系统要求很高的安全性,所以微软给ie添加了安全增强.这就使得ie在Internet区域的安全级别一直是最高的,而且无法进行整体调整. 关闭IE SEC服务器系统要求很高的安全性,所以微软给ie添 ...
- UIVIew之霓虹灯实现
// // AppDelegate.m // NiHongPractice // #import "AppDelegate.h" #define kColorValue arc4r ...
- C#中从元数据
元数据相对我们来说通俗点 就是你引用里面引用的那些dll比如 对Thread 按F12 不就是提示从元数据,..
- nginx location详解(三)
location官方文档:http://nginx.org/en/docs/http/ngx_http_core_module.html#location Syntax: location [ = | ...
- nginx_笔记分享_php-fpm详解
参考 http://syre.blogbus.com/logs/20092011.htmlhttp://www.mike.org.cn/articles/what-is-cgi-fastcgi-php ...
- Laravel5中集成Jasig cas统一认证系统
CAS : CAS(Central Authentication Service)是一款不错的针对 Web 应用的单点登录框架,这里介绍下我刚在laravel5上搭建成功的cas.提前准备工作:可运行 ...