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路由】<Router> <Siwtch> <Route>标签

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

  2. [React] 10 - Tutorial: router

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

  3. [React] react+redux+router+webpack+antd环境搭建一版

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

  4. [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 ...

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

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

  6. [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 ...

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

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

  8. Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别

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

  9. 浅谈vue$router 和 $route的区别

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

随机推荐

  1. 关于slideup和slidedown 鼠标多次滑过累积的动画效果

    stop() 方法停止当前正在运行的动画 包括animation动画和slideup/slidedown动画 例如:鼠标经过一个元素时,执行一个slide动画,多次快速经过,不处理的话这个元素会保留累 ...

  2. 批处理备份和恢复mysql数据库

    备份 set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%" md "D: ...

  3. C#01

    C#语言 求4名同学三门成绩的平均值 using System; using System.Collections.Generic; using System.Linq; using System.T ...

  4. 使用github创建博客

    本文主要介绍以下几个内容: 1.使用githbu创建自己的博客 2.将博客域名映射到自己的域名 3.如果写博客   一.使用github创建自己的博客 具体可参考https://pages.githu ...

  5. phpcms插件开发初步规范

    phpcms公用库函数原型 (一)./include/global.php 中的函数可在phpcms的任何一个程序中调用,下面是各函数的原型及用法. message($alert,$goback='' ...

  6. regular expression (php函数)

    1. 正则表达式是一种字符串搜索和匹配的工具 2. php中常用正则表达式函数 preg_match($pattern, $subject) preg_match_all($pattern, $sub ...

  7. Microsoft Anti-Cross Site Scripting Library V4.2 下载地址

    概述 微软反跨站脚本库V4.2(AntiXSS V4.2)是一种编码库,旨在帮助开发人员保护他们的ASP.NET基于Web的应用程序免受XSS攻击.它不同于编码库,因为它使用的白名单技术-有时也被称为 ...

  8. 猜数字-js

    var n = Math.round(Math.random()*10); //随机数 // alert(n); while(true){ var Onum = prompt('请输入1-10之间的数 ...

  9. Python学习之--异常处理

    Python中的Exceptions是所有异常的基类,内置的异常类都放在了exceptions模块中,通过dir()函数可以看到这些内置的类 通过raise 语句触发异常,如 >>> ...

  10. c语言实现BMP图像转换为灰度图

    当初是自己要装X,非要用c来写信息隐藏作业,装了X,就得付出实践.查了好久资料,到期末才把作业交了,这里总结一下. 这道题是将真彩图转换为灰度图. 关于BMP文件结构,这是困扰了我好久的问题,上网查了 ...