React笔记_(7)_react路由
路由
路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。
路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联。
那么react的路由到底指的是什么呢?
举个栗子~~~
在网页中点击后,从A页面跳到B页面,跳转过程中url发生变化,这就是一个简单的传统路由。
单页面路由,其实页面并没有真正跳转,而是停留在原页面。
建立一个index.html页面,可以只是通过替换body下某个div标签的内容,达到页面跳转的效果。
但仍然要求url发生变化,参数也需要传递,这样才算是一个真正的路由跳转机制。
路由应该是单页面框架的标配,在react却不是这样,它只关心MVC结构的视图层V。
后面的例子中,引入第三方组件 react-router 来补全功能。
1.安装react-router:
npm install react-router
2.建立一个路由模块。
modules下包含About.js,App.js,Repos.js
3.配置入口文件entry.js
// 引入工具类和自己的模块类。
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
import App from './modules/App';
import About from './modules/About';
import Repos from './modules/Repos';
//配置路由
// component参数表示模块名
render((
<Router history={hashHistory}>
<Route path="/" component={App} />
<Route path="/repos/:userName/:email" component={Repos} />
<Route path="/about" component={About} />
</Router>
), document.getElementById('app'));
4.模块1
About.js
import React,{ Component } from 'react';
class About extends Component{
render(){
return <div>About</div>
}
}
export default About;
5.模块2
App.js
import React, { Component } from 'react';
import { Link } from 'react-router';
// App.js作为默认模块
class App extends Component {
//ES7阶段草案stage-0,属性必须是静态
// static contextTypes = { router: React.PropTypes.object}
static contextTypes = { router: React.PropTypes.object };
handleRedirect(event) {
event.preventDefault();
const userName = "zhangwei";
const email = "zhangwei@qq.com";
//解析变量用$
const path = `/repos/${userName}/${email}`;
//跳转
this.context.router.push(path);
}
render() {
return (
<div>
<h2>App</h2>
<ul>
<li><Link to="/repos/zhangwei/qqcom">Repo params</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<button onClick={this.handleRedirect.bind(this)}>跳转</button>
</div>
);
}
}
export default App;
6.模块3
Repos.js
module.exports = {
entry: './entry.js', //入口
output: { //输出
path: __dirname,
filename: "./dest/bundle.js"
},
module: {
loaders: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { compact: false, presets: ['es2015', 'react', 'stage-0'] }
}]
}
};
7.配置文件
webpack.config.js
module.exports = {
entry:'./entry.js',
output:{
path:__dirname,//定义输出文件夹
filename:"bundle.js"
},
module:{
loaders:[
{test:/\.js?$/,loader:'babel-loader',
exclude:/node_modules/,
query:{compact:false,presets:['es2015','react','stage-0']}
}]
}
};
8.安装es7的stage-0阶段草案:
npm install babel-preset-stage-0
9.打包webpack
wepback --progress
10.html文件追加。
这样一个路由的方案就算是完成了。
这种方式叫做哈希路由,是最常用的路由方式。
还有两种方式叫browserHistory和createMemoryHistory:
browserHistory是指正常的浏览器路由,这个直接调用了浏览器的History API。
createMemoryHistory主要用于服务器渲染。它创建一个内存的history对象,不与浏览器url互动。
也可以去码云上下载:https://git.oschina.net/zhang.wei/React.git
React笔记_(7)_react路由的更多相关文章
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- React笔记_(6)_react语法5
react的版本 目前主要的react有 ES5,ES6.也有ES5和ES6混合编写的.比较混乱. react官方提倡用ES6. 说到这里,就需要提到一个概念--mixin mixin在es6中被摒弃 ...
- React笔记_(5)_react语法4
ajax 数据应用场景 在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间. 正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等 ...
- React笔记_(4)_react语法3
生命周期 很多语言中都讲了关于生命周期.这可是决定生命的周始,有没有存在感的关键啊. 生命周期,有生有死,有始有终,因果轮回,循环往复.(说多了) react中,主要说明的是 一个组件的生命周期.简单 ...
- React笔记_(2)_react语法1
这一节内容主要以了解为主. 渐渐的体会react的语法和其特性. ① htmlAndJs 混合编写 react和以往的前后台书写方式不一样. 在之前的多个语言中,讲求的是将页面代码和js代码逻辑分开, ...
- React笔记_(1)_react概述
React概述 React是一种很好的前端技术. 它将应用打散成独立的小模块,然后进行组装,完成开发. react远比angularjs难学的多. react依赖的如webpack等各种工具得先学 ...
- golang学习笔记6 beego项目路由设置
golang学习笔记5 beego项目路由设置 前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧: package main ...
- angular学习笔记(5)- 路由
angular1学习笔记(5)- 路由 需要前端路由的原因: 1.ajax请求不会留下History记录 2.用户无法通过URL进入应用中的指定页面(保存书签.链接分享给朋友) 3.ajax对SEO是 ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
随机推荐
- python enumerate
>>> a = [1, 2, 3] >>> for index, item in enumerate(a): print index, item 0 1 1 2 2 ...
- cocos2dx 3.x(捕鱼达人炮台角度换算)
// // GameScence.hpp // NotesDamo // // Created by apple on 16/10/23. // // #ifndef GameScence_hpp # ...
- MVC 上传文件并展示
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 最近在做自学MVC,遇到的问题很多,索性一点点总结 ...
- NLS_LANG参数说明
NLS_LANG参数说明 格式: NLS_LANG = language_territory.charset 它有三个组成部分(语言.地域和字符集),每个成分控制了NLS子集的特性.其中: Lang ...
- ARM 嵌入式中断
1. SATA中断要打开,挂在fiq上(通过cpu中断的fiq中断enable位,对sata中断使能), 2.外设及GPIO中断打开,挂在irq上(通过cpu中断的irq 的enable位对其使能), ...
- 发现前端框架 bui-min.js
http://www.builive.com/apps/default/main.html#menu/code http://www.builive.com/demo/grid-plugin.php# ...
- .net 调度器怎么实现心跳(socket除了他,没选择吧)
自己写调度器,就要从tcp通信入手:心跳的实现除了使用socket,想不到其他任何方案. socket基本使用demo: Socket Client: static void Main(string[ ...
- GTA项目 三, 使用 bootstrap table展示界面,使得data和UI分离
/** bootstrap-table - v1.5.0 - 2014-12-12* https://github.com/wenzhixin/bootstrap-table* Copyright ( ...
- Opencv读取各种格式图片,在TBitmap上面重绘
//opencv读取图片 cv::Mat image; //const char *fileName = "HeadImage-UI/Photo-001.bmp"; const c ...
- hduoj 4708 Rotation Lock Puzzle 2013 ACM/ICPC Asia Regional Online —— Warmup
http://acm.hdu.edu.cn/showproblem.php?pid=4708 Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/O ...