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 = "[e-mail]";
        //解析變量用$
        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