React笔记_(7)_react路由

时间：2021-10-21 01:25:48

路由

路由（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

　

相关文章