[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 ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
随机推荐
- Examples_08_03
访问本地程序.http://192.168.1.103/preg_match/test.php,如果换成localhost或者127.0.0.1,则会导致无法访问. http://blog.csdn. ...
- 开启Mysql慢查询来优化mysql
开启Mysql慢查询来优化mysql 优化sql语句是优化数据库的一个很重要的方面,那么怎么发现那些耗时耗资源的sql语句呢,开启Mysql慢查询! 1.查看是否开启慢查询,默认情况下是关闭的.你的m ...
- 在iptables和selinux中放行smb服务
配置selinux [root@localhost samba]# getsebool -a | grep samba 查找selinux中对samba的限制项samba_domain_control ...
- Mybatis学习总结(二)—使用接口实现数据的增删改查
在这一篇中,让我们使用接口来实现一个用户数据的增删改查. 完成后的项目结构如下图所示: 在这里,person代表了一个用户的实体类.在该类中,描述了相关的信息,包括id.name.age.id_num ...
- QT5-控件-QProgressBar-进度条-用来做下载进度,文件读取进度还不错
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QProgressBar> ...
- DIY一款C/C++编译器
一. 原理 1.1 记事本编程 我们用记事本新建一个文件,文件后缀改成.c,例如文件名叫做"1.c",在文件里写上最简单的C或者C++代码, #include<stdio.h ...
- 优化JavaScript脚本的性能
循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差, ...
- html5之web worker
Web Worker 在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...
- 数据库和Doctrine(转载自http://www.111cn.net/phper/332/85987.htm)
对于任何应用程序来说最为普遍最具挑战性的任务,就是从数据库中 读取和持久化数据信息.尽管symfony完整的框架没有默认集成ORM,但是symfony标准版,集成了很多程序,还自带集成了Doctrin ...
- js获取对象位置的方法
scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...