[React] React Router: Router, Route, and Link

时间:2022-06-09 10:43:05

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的更多相关文章

  1. 【react router路由】&lt&semi;Router&gt&semi; &lt&semi;Siwtch&gt&semi; &lt&semi;Route&gt&semi;标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  2. &lbrack;React&rsqb; 10 - Tutorial&colon; router

    Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...

  3. &lbrack;React&rsqb; react&plus;redux&plus;router&plus;webpack&plus;antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  4. &lbrack;Angular2 Router&rsqb; 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 ...

  5. 理解OpenShift(1):网络之 Router 和 Route

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  6. &lbrack;Angular2 Router&rsqb; Resolving route data in Angular 2

    From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know ...

  7. vue中的router和route有什么区别?

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  8. Vue中美元&dollar;符号的意思与vue2&period;0中的&dollar;router 和 &dollar;route的区别

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  9. 浅谈vue&dollar;router 和 &dollar;route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

随机推荐

  1. Xamarin 与VS2015RC(xamarin 3&period;11&period;450) 报空指针错误。

    在Android开发中发现的一个“初步认为是调试器的bug”. 于早些时候发布在公司论坛上,传送门: http://www.newlifex.com/showtopic-1400.aspx 使用vs2 ...

  2. CentOS安装LNMP环境的基础组件

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. 在安装LNMP环境之前,请确保已经使用yum安装了以下各类基础组件(如果系统已自带,还可以考虑yum update下基础组件): ...

  3. MySQL vs&period; MongoDB&colon; Choosing a Data Management Solution

    原文地址:http://www.javacodegeeks.com/2015/07/mysql-vs-mongodb.html 1. Introduction It would be fair to ...

  4. 小白学Linux--虚拟机下安装Ubuntu16

    最近接收到任务,说是下半年可能要搞全文检索.听到后顿时炸锅了,一方面是对新技术的兴奋(当然主要还是这技术比较值钱),另一方面,我TM连Linux都不会玩,怎么搞全文检索.怀揣着对开源世界的无线向往(恐 ...

  5. CSS从大图片上截取小图标的操作(转)

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  6. 用户输入内容转换成Pig Latin形式。

    //(单词的第一个元音字母之前的一道单词后面,以"ay"结尾,英语单词首字母为元音字母或者没有元音字母的以“ay”为后缀.)package toPigLatin; import j ...

  7. ”Metro UI之磁贴(二)

    也来“玩”Metro UI之磁贴(二) 继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+ ...

  8. iOS 界面 之 EALayout 无需反复编译,可视化实时界面,告别Storyboard AutoLayout Xib等等烦人的工具

    http://blog.csdn.net/fatherhui iOS开发,EALayout 无需反复编译,可视化实时界面,告别Storyboard AutoLayout Xib等等烦人的工具 EALa ...

  9. 百度地图API-javascript-web地图的应用

    html部分的代码 <div class="maxwidth"> <div class="address clearfix"> < ...

  10. Kali Linux NetHunter教程Kali NetHunter支持的设备和ROMs

    Kali Linux NetHunter教程Kali NetHunter支持的设备和ROMs NetHunter是一个基于Kali Linux为Nexus设备构建的Android渗透测试平台,其中包括 ...