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. 一次CTF后对二维码的认识

    前一段时间参加一个CTF比赛的时候其中有一个题目就是一张二维码图片,然后获取其中的信息来解题,那个二维码的特别之处在于,它把3个位置探测区域用几张美女图片代替了,然后在做题的时候顺便简单的了解了一下二 ...

  2. JAVA课后作业01

    一.关于枚举的问题 public class EnumTest { public static void main(String[] args) { Size s=Size.SMALL; Size t ...

  3. js模拟发送 FormData数据

    后台express需要connect-multiparty模块接收formData的数据类型 class ourFormData { constructor(data, rs) { return ne ...

  4. HTML、CSS知识点,面试开发都会需要--No.2 CSS

    No.2  CSS 1.选择器类型 选择器类型包括:type.class.id. 2.引用外部css文件 使用link元素,添加rel和href属性:<link rel="styles ...

  5. webstorm 介绍

    最新版2017 破解 注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.iteblog.com/key. ...

  6. Eclipse 02: 安装SVN插件

    1.下载最新的Eclipse,我的版本是3.7.2 indigo(Eclipse IDE for Java EE Developers)版    如果没有安装的请到这里下载安装:http://ecli ...

  7. c# Resolve SQlite Concurrency Exception Problem (Using Read-Write Lock)

    This article describes the c# example to solve the problem of SQlite concurrent exception method. To ...

  8. Python基础(九) type元类

    python元类:type()    元类是python高阶语法. 合理的使用可以减少大量重复性的代码. 元类实际上做了以下三方面的工作: 干涉创建类的过程 修改类 返回修改之后的类 为什么使用元类? ...

  9. ASP.NET Core 之 Identity

    Claims:声明(证件单元)Identity:身份Principal:当事人Authentication :认证Authorization:授权 http://www.cnblogs.com/sav ...

  10. to_date

    SQL> ALTER SESSION SET NLS_DATE_FORMAT = 'YYYY-MM-DD HH24:MI:SS'; 会话已更改. SQL> SELECT TO_DATE(' ...