重構之路：配置react和react-router和antd

開始

這章咱們來說怎麼配置react和react-router。

antd

由於項目中須要使用到antd，因此咱們先引入antd先。這裏有一點要說一下，antd v3.9.0以後在打包時會有一個icons的包很是大，並且目前並無很好的解決辦法，因此咱們使用的是3.8.2版的。

關於這個問題，GitHub上也有，下面附上連接：

github.com/ant-design/…

咱們去控制檯執行：

yarn add antd@3.8.2 -D
複製代碼

再去以前的home.js裏引入：

import React, {Component} from 'react'
import Button from 'antd/lib/button';
import "antd/dist/antd.css";

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <div> <Button type="primary">按鈕</Button> </div>
        )
    }
}

export default Home
複製代碼

打開瀏覽器預覽出現藍色的按鈕就成功了。

react

首先咱們要下載react相關的插件，在控制檯執行：

yarn add react react-dom -D
複製代碼

而後去webpack.config.js裏：

{
                test:/\.(js|jsx)$/,//在這裏添加一個jsx
                exclude: '/node_modules/',
                include:path.resolve(__dirname,'src'),
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                '@babel/preset-env',
                                '@babel/preset-react'//加上這一行
                            ],
                            plugins:[
                                "@babel/plugin-transform-runtime"
                            ]
                        }
                    }
                ]
            },
複製代碼

而後去index.js裏，頂部添加，這裏注意要添加在@babel/polyfill下面：

import React from 'react';
import ReactDOM from 'react-dom';
複製代碼

在下面寫上：

ReactDOM.render(<h1>react</h1>,document.getElementById('root'));
複製代碼

保存以後，執行yarn run dev，若是出現下面這樣，說明react配置成功了：

react-router

咱們在控制檯執行：

yarn add react-router-dom -D
複製代碼

這裏注意一下，react-router-dom是增強版的react-router。裏面已經包括了react-router了，因此咱們只要下載react-router-dom就好了。 使用這個插件不須要配置webpack，咱們先去src下新建一個pages文件夾，在裏面新建一個home頁面，再在src下新建一個components文件夾，在裏面新建一個aaaaa.js和bbbbb.js文件。

咱們在home.js裏寫上：

import React, {Component} from 'react'
import {Route,Link} from 'react-router-dom';
import A from "../components/aaaaa"
import B from "../components/bbbbb"

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <div>
                <Link to="/aaaaa">aaaaa</Link>
                <Link to="/bbbbb">bbbbb</Link>

                <Route exact path="/" component={A}/>
                <Route path="/aaaaa" component={A}/>
                <Route path="/bbbbb" component={B}/>
            </div>
        )
    }
}

export default Home
複製代碼

在aaaaa.js裏寫上，bbbbb.js和下面相同 ，只不過是把h1裏的內容改爲bbbbb：

import React, {Component} from 'react'


class A extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {
        return (
            <div> <h1>aaaaa</h1> </div>
        )
    }
}

export default A
複製代碼

而後咱們須要修改index.js裏的內容：

import "@babel/polyfill"
import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router} from 'react-router-dom'
import Home from './page/home'

import './index.css'


if (module.hot) {
    module.hot.accept()
}

ReactDOM.render(
    <Router> <Home/> </Router>
    ,document.getElementById('root'));
複製代碼

這裏須要注意的是Router是一個最外層的組件，而且下面只容許有一個節點，否則會報錯。

HashRouter和BrowserRouter

再講一個注意點，我在這裏使用了HashRouter，在瀏覽器打開是正常使用的，可是修改爲BrowserRouter後，刷新頁面就變成了這樣：

咱們能夠先去看下頁面刷新有什麼不同。 使用HashRouter刷新後，network裏是這樣的：

使用BrowserRouter刷新後，network裏是這樣的：

發現使用BrowserRouter會去請求後臺，而後返回相應的內容。可是這裏咱們並無配置服務器方面的設置。因此請求後臺的時候會報404。 固然這個也是有解決方法的，咱們去webpack.config.js裏，在devServer下加上：

historyApiFallback:true//加在devServer裏
複製代碼

這個配置是當訪問404的時候，能夠跳轉到首頁。

這裏再講一下HashRouter和BrowserRouter，HashRouter使用的是修改hash來實現路由跳轉，而BrowserRouter使用的是h5的history API來實現的。

若是在點擊路由的過程當中出現這樣的報錯：

咱們只須要在使用了Link的地方加上：

<Link to="/aaaaa" replace>aaaaa</Link>//加上replace就好了
複製代碼