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. ...
随机推荐
- I - All X
F(x,m) 代表一个全是由数字x组成的m位数字.请计算,以下式子是否成立: F(x,m) mod k ≡ c Input 第一行一个整数T,表示T组数据. 每组测试数据占一行,包含四个数字x,m,k ...
- 赶鸭子上架的cdq分治
前置技能:归并排序,树状数组. cdq分治主要是用来离线解决一些奇怪的问题的.可以用来代替一些高级数据结构比如树套树或者KD-Tree之类的... 话说挑战2上的KD-Tree我到现在还没开始学... ...
- java个人博客源码
初入博客园,请各位多关照,来而不往非礼也. 如需要源码以及学习内容,qq:1397617269,我看到就回你们资源. 直接给链接: 链接:https://pan.baidu.com/s/1S_awtg ...
- filter滤镜效果(css3属性)
<!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...
- 文件内容统计:对任意给定的.txt文件进行内容的字符数、行数、单词数进行统计
项目源码地址:https://gitee.com/xjtsh/projects 功能实现: wc.exe -c file.c //返回文件 file.c 的字符数 wc.exe -w file ...
- BeanUtils工具类
用对象传参,用JavaBean传参. BeanUtils可以优化传参过程. 学习框架之后,BeanUtils的功能都由框架来完成. 一.为什么用BeanUtils? 每次我们的函数都要传递很多参数很麻 ...
- Python时间、日期、时间戳之间的转换
一.字符串与为时间字符串之间的互相转换 方法:time模块下的strptime方法 a = "2012-11-11 23:40:00" # 字符串转换为时间字符串 import t ...
- python基础(12)-包的导入&异常处理
包的导入 几种导入方式 import 包名 import time time.time() import 包名,包名 import time,sys time.time() sys.path from ...
- 这10个Python项目超有趣!
前言: Python可谓是现在很多人正在学或者想学的一个脚本语言了,提到学习自然就少不了拿项目练手,可是一般的项目根本提不起兴趣嘛,这10个项目可是非常有趣的,不信你看看. [Python 图片转字符 ...
- DOIS 2019 DevOps国际峰会北京站来袭~
DevOps 国际峰会是国内唯一的国际性 DevOps 技术峰会,由 OSCAR 联盟指导.DevOps 时代社区与高效运维社区联合主办,共邀全球80余名顶级专家畅谈 DevOps 体系与方法.过程与 ...