React笔记_(7)_react路由
路由
路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。
路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联。
那么react的路由到底指的是什么呢?
举个栗子~~~
在网页中点击后,从A页面跳到B页面,跳转过程中url发生变化,这就是一个简单的传统路由。
单页面路由,其实页面并没有真正跳转,而是停留在原页面。
建立一个index.html页面,可以只是通过替换body下某个div标签的内容,达到页面跳转的效果。
但仍然要求url发生变化,参数也需要传递,这样才算是一个真正的路由跳转机制。
路由应该是单页面框架的标配,在react却不是这样,它只关心MVC结构的视图层V。
后面的例子中,引入第三方组件 react-router 来补全功能。
1.安装react-router:
1 | 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阶段草案:
1 | npm install babel-preset-stage-0 |
9.打包webpack
1 | wepback --progress |
10.html文件追加。
这样一个路由的方案就算是完成了。
这种方式叫做哈希路由,是最常用的路由方式。
还有两种方式叫browserHistory和createMemoryHistory:
browserHistory是指正常的浏览器路由,这个直接调用了浏览器的History API。
createMemoryHistory主要用于服务器渲染。它创建一个内存的history对象,不与浏览器url互动。
也可以去码云上下载:https://git.oschina.net/zhang.wei/React.git
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
作者:风来风往风伤
出处:http://www.cnblogs.com/amwuau/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。