React学习笔记二——react-router
2019独角兽企业重金招聘Python工程师标准>>>
今天写了一个关于react-router的demo,因为不喜欢下载太多的依赖包,所以就直接引得js,解析会比较慢一些。
首先先来看一下,效果图
下面来看具体代码
index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="common/react.min.js"></script><script src="common/react-dom.js"></script><script src="common/browser.min.js"></script> //浏览器解析jsx用的的js<script src="common/ReactRouter.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body><div id="app"></div>
</body>
<script src="component/index.jsx" type="text/babel"></script>
</html>
index.jsx
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;
var browserHistory = ReactRouter.browserHistory;/*** 标题*/
var Header = React.createClass({render: function() {return (<header><p>标题</p></header>);}
});/*** 结尾*/
var Footer = React.createClass({render: function() {return (<footer><p>结尾</p></footer>);}
});/*** 列表*/
var Navlist = React.createClass({ render: function() {return (<section><nav><Link to="/list">列表一</Link><Link to="/about">列表二</Link> </nav></section>);}
});/*** 列表一*/
var List = React.createClass({render: function() {return (<ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li><li>我是第五个</li></ul>);}
});var About = React.createClass({render: function() {return (<ul>第二列</ul>);}
});// 应用入口
var App = React.createClass({render() {return (<div><Header/><Navlist/>{this.props.children}<Footer/></div>)}
});// 定义页面上的路由
ReactDOM.render(<Router history={browserHistory}><Route path="/" component={App}><IndexRoute component={List} /> //默认加载<Route path="list" component={List}/><Route path="about" component={About}/></Route></Router>,document.getElementById('app')
);
history 配置
React Router 是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。
createHashHistory
createBrowserHistory
createMemoryHistory
这三个有什么区别呢:
createHashHistory
这是一个你会获取到的默认 history ,如果你不指定某个 history 。它用到的是 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由。这个 支持 ie8+ 的浏览器,但是因为是 hash 值,所以不推荐使用。
createBrowserHistory
Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL,新建一个像这样真实的 URL example.com/some/path。
Memoryhistory
不会在地址栏被操作或读取。
转载于:https://my.oschina.net/u/2255569/blog/667777
React学习笔记二——react-router相关推荐
- React学习笔记二:实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
- React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
- React学习笔记二 通过柯里化函数实现带参数的事件绑定
class Login extends React.Component {state = {username: '',password: ''}saveFormData = (type) => ...
- React学习笔记(二) | 受控组件
React组件 目标 能够知道受控组件是什么 能够写出受控组件 了解非受控组件 表单处理 受控组件(★★★) HTML中的表单元素是可输入的,也就是有自己的可变状态 而React中可变状态通常保存在s ...
- React学习笔记六 React拓展 - SetState
React拓展 - setState setState更新状态的两种写法 1.setState({}, [callback]) export default class Test extends Co ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- react render没更新_web前端教程分享React学习笔记(一)
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
最新文章
- 下载CentOS源码、Hyper-V虚拟机联网、拷贝文件到Hyper-V虚拟机中的Linux系统
- Android 第十九课 大喇叭--广播机制----动态注册监听网络变化与静态注册实现开机启动
- 信息学奥赛C++语言: 抽奖1
- win11触屏模式在哪 Windows11触屏模式的设置方法
- php qr生成二维码
- PASCAL-VOC2012数据集(vocdevkit、Vocbenchmark_release)详细介绍
- paip.java-asp-php-.net互相调用方法大总结
- 数据挖掘概念与技术_第三版_课后习题
- 展讯SC9820E驱动配置之camera配置
- jpg图片批量压缩的简单方法
- Python Tic Tac Toe游戏
- 个人资料管理经验总结
- iOS仿微信录像和拍照(swift5.0)
- Buffer透视:duplicate(),slice()等
- 微信扫描二维码网页跳转显示信息
- eclipse中文版 中英文切换 + 全语言转换
- Codeforces 题目合集+分类+代码 【Updating...】【361 in total】
- android手机自动安装程序,手机自动安装软件怎么办
- 采购服务器和终端的请示文件,设备采购申请报告模板
- 从零开始学产品第二篇:关于测试的一切
热门文章
- 人脸对齐--Face Alignment at 3000 FPS via Regressing Local Binary Features
- 人群密度估计--Spatiotemporal Modeling for Crowd Counting in Videos
- 目标检测--SSD: Single Shot MultiBox Detector
- hp优盘启动盘格式化工具_启动盘——拯救你电脑的利器
- mysql query日期_如何获取mysql中两个日期之间的日期列表select query
- MATLAB编写ode文件,MATLABODE45问题M文件为br/functiondq 爱问知识人
- 企业项目学习准备阶段——Rhel6.5版本无图形虚拟机封装过程及相关配置
- keras中重要的函数用法及参数详解
- python 灰度图像_python库skimage 给灰度图像染色
- python爬虫实验报告_python爬虫实验