[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 ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
随机推荐
- (转)PHP 的 __FILE__ 常量
今天碰到了PHP的常量__FILE__的问题了. 在网上查了一下.总结了以下规律. dirname(__FILE___) 函数返回的是脚本所在在的路径. 比如文件 b.php 包含如下内容: < ...
- VC Windows系统服务创建代码
Windows系统服务创建步骤,常用类封装,废话不多说,直接上代码 // ServceDemo.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" ...
- iOS 开发之EXC_BAD_ACCESS异常分析
一:EXC_BAD_ACCESS异常介绍在调试objective-c程序的过程中,程序crash的现象在所难免,但大部分的错误都能够通过显示的错误原因结合NSLog的方式来解决,比如NSInvalid ...
- STM8S和STM8L调试串口中断的注意点
1. STM8L串口中断注意点 在调试PM2.5传感器GP2Y1051的时候,发现在仿真的时候开始能够进行数据的接受,但是如果暂停之后就不能接受数据,其实只是接收了一次完整的数据. 问题程序 解决方法 ...
- 1、CentOS6.5系统安装及学习
1. CentOS6.5系统安装及学习 1.需要的工具,Vmware workstation12虚拟机,CentOS6.5 ISO镜像,选择的是32位系统. 2.下载CentOS6.5地址:htt ...
- CentOS6.4 GOOGLE chrome install
yum install http://people.centos.org/hughesjr/chromium/6/i386/RPMS/chromium-28.0.1500.45-205727.i686 ...
- Dom4j修改xml文档
1. 写出内容到xml文档 XMLWriter writer = new XMLWriter(OutputStream, OutputForamt) wirter.write(Document); 2 ...
- mysql优化 - mysql 的 hint
FORCE INDEX 强制索引 只使用建立在field1上的索引,而不使用其它字段上的索引. SELECT * FROM table1 FORCE INDEX (field1) IGNORE IND ...
- Git之detached HEAD
今天遇到了和CSDN上博主相同的问题,就是使用git -branch -a 发现自己处于一个零时的分支上.这篇博文写的不错,转载记录一下. 转载:http://blog.csdn.net/lili62 ...
- 解决rsyslog 断电或者被kill 重发问题
$InputFilePersistStateInterval 1 Specifies how often the state file shall be written when processing ...