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. (转)SVN源码管理(上&下)

    原文地址:http://www.cnblogs.com/IPrograming/archive/2012/12/15/SVN_1.html 使用SVN进行源码管理(上) 在原来的项目中使用的源码管理工 ...

  2. WindowsServer2012 取消密码策略

    1.打开“组策略管理”界面:管理工具 >> 组策略管理,如果找不到该功能,则需要先安装,在“服务管理器”里面“添加新功能”.(或者:开始——运行——gpmc.msc) 2.依次打开“林”& ...

  3. 使用poi3.9的jar输出excel

    // 取得模板文件存放的路径 ReadFilePath = ServletActionContext.getServletContext().getRealPath(ExcelTemplateFile ...

  4. 网页通用的测试用例(出处:: 51Testing-- lxp1119216)

    此题的考察目的:面试者是否熟悉各种测试方法,是否有丰富的Web测试经验, 是否了解Web开发,以及设计Test case的能力 这个题目还是相当有难度的, 一般的人很难把这个题目回答好. 首先,你要了 ...

  5. DoingOrder.aspx.cs缓存的使用方法

    using System; using System.Web.UI; using System.Data; using System.Text; using BLL = SmartWaterSys.B ...

  6. FlowPlayer 参数说明

    <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> & ...

  7. 一个简单的javascript获取URL参数的代码

    function request(paras){ var url = location.href; var paraString = url.substring(url.indexOf("? ...

  8. Windows 7 Apache下计算机无法访问局域网网站的问题

    在Windows 7系统下,由于安全限制问题,本机搭建的网站,局域网内其它计算机是无法访问的. 要解决这个问题,只需要在防火墙加入自建规则便可以了,具体步骤如下: 控制面板=>Windows防火 ...

  9. Java Tomcat 中调用.net DLL的方法

    近日一个java的项目,客户要求项目中必须使用其提供的加密机制,扔给了两个.net写的DLL.网络上搜了一圈也没找到啥东西,甚至看到人扬言此事绝无可能.郁闷当中考虑了一个思路.用C#做一个Com,调用 ...

  10. python 多层装饰器

    25.多层装饰器:      1.原理:执行顺序从上往下,#2和#3组成一个函数假设为nf1,#1和nf1组成一个函数nnf1           f1成为ck_ty_of_us的inner函数即nf ...