import React from 'react';
import ReactDOM from 'react-dom'
import {Link,Route,HashRouter} from 'react-router-dom'
//HashRouter在开发阶段用
const Home = () => (
<div>
<h2>首页</h2>
</div>
) export default class App extends React.Component { render(){
return(
<HashRouter>
{/* 包裹的为路由元素,不生成dome节点 */}
<div>
<Link to="/">主页</Link>
<Link to="/one">第一页</Link>
<Link to="/two">第二页</Link> <Route exact path="/" render={()=>(
<h2>主页</h2>
// 这个render返回的其实是一个js对象
)}/>
<Route path="/one" render={()=>(
<h2>第一页</h2>
)}/>
<Route path="/two" render={()=>(
<h2>第二页</h2>
)}/>
</div>
</HashRouter>
)
}
} ReactDOM.render(<App/>,document.getElementById("app"))

react-router 4.0(一)的更多相关文章

  1. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  2. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  3. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  4. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  5. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  6. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  7. React Router 4.0 基本使用

    路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...

  8. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

  9. React Router 4.0中文快速入门

    import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...

  10. 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

随机推荐

  1. less的写法 calc以及变量

    less的文档还是很容易读懂的, 一:结构的嵌套:照着html结构写,目前没有出现错误: 二:变量引用:1,单个变量通常用@变量名 2,多个变量写在一起, 三:calc计算: 目前我觉得最具实用性的就 ...

  2. python全栈开发 * 36知识点汇总 * 180721

    36 操作系统的发展史 进程一.手工操作--穿孔卡片 1.内容: 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制 台开关启动程序针对 ...

  3. vue的事件对象,方法执行

    方法都写在methods重,有两种写法:1. getMsg:function(){ alert(); },  这种写法就是对象中的方法 2. getMsg1(){ alert(); }注意没有func ...

  4. 我了解到的新知识之—Apple Captive Portal 网页认证登陆公共Wifi

    因为今天一个用户遇到选择公司WiFi后,无法弹出网页认证登陆界面的问题,随即上网搜索相关信息,因为公司内没有VPN,无法FQ,只能用bing来搜索一下相关信息了. Captive Portal听起来好 ...

  5. 算法基础_递归_求杨辉三角第m行第n个数字

    问题描述: 算法基础_递归_求杨辉三角第m行第n个数字(m,n都从0开始) 解题源代码(这里打印出的是杨辉三角某一层的所有数字,没用大数,所以有上限,这里只写基本逻辑,要符合题意的话,把循环去掉就好) ...

  6. odoo中self的使用

    一:self是什么 目前新版的Odoo中使用到的self,是对  游标cr.用户ID.模型.上下文.记录集.缓存  的封装. 我们可以通过 self.XX 获取到这些封装的东西,比如:self.cr. ...

  7. C++中的const成员函数(函数声明后加const,或称常量成员函数)用法详解

    http://blog.csdn.net/gmstart/article/details/7046140 在C++的类定义里面,可以看到类似下面的定义: 01 class List { 02 priv ...

  8. python连接mysql-PyMySql模块

    安装 pip3 install pymysql 使用 输出mysql版本 import pymysql # 打开数据库连接 db = pymysql.connect("localhost&q ...

  9. linux系统644、755、777权限详解

    在linux系统中644.755.777三种权限是非常重要的一些权限了,下面我来详细的介绍644.755.777三种权限的使用,希望对各位有帮助. 常用的linux文件权限:444 r--r--r-- ...

  10. [LeetCode] 62. Unique Paths_ Medium tag: Dynamic Programming

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...