react-router 4.0(一)
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(一)的更多相关文章
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- React Router 4.0 基本使用
路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...
- React Router 4.0 ---- 嵌套路由和动态路由
嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...
- React Router 4.0中文快速入门
import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- 从composer上在本地创建一个项目
在想要创建项目的目录下,输入以下代码
- 配置非安装版tomcat服务
1.设置服务名称,进入tomcat目录/bin文件夹,编辑service.bat中的 set SERVICE_NAME = (修改成你需要的服务名,这个将是你启动服务的句柄): 2.修改 set PR ...
- QT上位机
程序是用QT写的,通过COM口进行数据的读取. 源码地址:https://github.com/kunkunlin/QT-SWJ
- JBPM工作流(三)——ProcessEngine与Service API
1.获取processEngine的方法: a) 方法一 private ProcessEngine processEngine = new Configuration().setResource(& ...
- CTextUI 文本控件 显示数字方法
得将数字变成字符串才行 m_ptxtCurrentcharUI->SetText(util::int32ToCString(txtLength)); 或 String.valueOf(x) 或 ...
- Gym 101194E / UVALive 7901 - Ice Cream Tower - [数学+long double][2016 EC-Final Problem E]
题目链接: http://codeforces.com/gym/101194/attachments https://icpcarchive.ecs.baylor.edu/index.php?opti ...
- Restful API设计规范
理解RESTful架构 Restful API设计指南 理解RESTful架构 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式 ...
- LeetCode 521 Longest Uncommon Subsequence I 解题报告
题目要求 Given a group of two strings, you need to find the longest uncommon subsequence of this group o ...
- Vue使用Typescript开发编译时提示“ERROR in ./src/main.ts Module build failed: TypeError: Cannot read property 'afterCompile' of undefined”的解决方法
使用Typescript开发Vue,一切准备就绪.但npm start 时,提示“ ERROR in ./src/main.tsModule build failed: TypeError: Cann ...
- HBase 笔记2
Hadoop 服务启动顺序: zookeeper ->journalnode->namenode -> zkfc -> datanode HBase Master WEB控制台 ...