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

 

 

posted @   风来风往风伤(TiAmo)  阅读(1913)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示