react-router4 第一篇

無奈，英語4級沒過，只能靠猜了。。

首先就是安裝了

npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev react-router@4
npm install --save-dev react-router-dom

不管有用沒用先裝上！！！

新建一個webpack.config.js，這里使用webpack2來打包jsx

var webpack = require("webpack");
var path = require("path");

module.exports = {
    context: __dirname + "/app/js",
    entry: {
        login: ["./login.js"], // 為了將來的多入口寫法
    },
    devtool: "source-map", // 為了可以在控制台跟蹤到自己的代碼位置，精確到行
    output: {
        path: path.resolve(__dirname,"static/js"), // 輸出目錄
        filename: "[name].bundle.js", // 輸出文件名
    },
    module: {
        rules: [
            {
                test: /\.js|\.jsx/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: {
                    	presets: ["es2015", "react", "babel-polyfill"]   // 打包模塊，babel-polyfill是為了讓axios兼容ie的，，不用promise對象可以不寫
                	}
                }]
            },
            {
				test: /\.css$/,
				use: [
					{
						loader: "style-loader",
						options: {
	                        // modules: true // 設置css模塊化,詳情參考https://github.com/css-modules/css-modules
	                    }
					},
					{
						loader: "css-loader",
						options: {
	                        // modules: true // 設置css模塊化,詳情參考https://github.com/css-modules/css-modules
	                    }
					},
					// {
					// 	loader: "postcss-loader", // 添加瀏覽器前綴
					// 	options: {
					// 		plugins: function () {
					// 			return [
					// 				require('autoprefixer')
					// 			]
					// 		}
					// 	}
					// }
				]
			}
        ]
    },
    devServer: {             // 打包加自動刷新，webpack-dev-server --hot 可以自動熱替換，，，雖然我並沒有感覺到有多快。。。
        contentBase: __dirname,
        host: '0.0.0.0',
        port: 5005,
        inline: true,
        historyApiFallback: true,
	}
}

開始寫react-router啦
以下代碼，完全復制於 https://reacttraining.com/react-router/web/example/basic

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>     // 創建一個路由
    <div>
      <ul>  // Link 組件 相當於a標簽，to屬性相當於a標簽中的href，可以打開控制台看到，
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>
      // 監聽路由，地址欄的變化，，很抱歉exact的意思我現在都不知道，觀察到exact 在跟路由下，和exact={activeOnlyWhenExact}
      <Route exact path="/" component={Home}/>  // 如果地址欄訪問了跟路徑，比如http://localhost:5005/  就會去渲染<Home /> 組件
      <Route path="/about" component={About}/>  // 如果地址欄訪問了/about 路徑，比如http://localhost:5005/about  就會去渲染<About/> 組件
      <Route path="/topics" component={Topics}/> // 如果地址欄訪問了topics 路徑，比如http://localhost:5005/topics  就會去渲染<Topics/> 組件
    </div>
  </Router>
)

這就是react-router的最簡單的用法，什么附加功能都沒有，，僅僅是根據地址欄去渲染相應的組件！！！，，僅此而已，
不過這里有一個特別坑的地方，如果你的當前路徑是http://localhost:5005/templates/的話，去訪問 /about 路由，地址欄會直接變成http://localhost:5005/about，，然后再也后退不回去了，，當然后面的教程里肯定有解決方法，只是我還不知道，。。

以上代碼，完全復制於 https://reacttraining.com/react-router/web/example/basic