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

開始

這章我們來講怎麼配置react和react-router。

antd

因為項目中需要使用到antd，是以我們先引入antd先。這裡有一點要說一下，antd v3.9.0之後在打包時會有一個icons的包非常大，而且目前并沒有很好的解決辦法，是以我們使用的是3.8.2版的。

關于這個問題，GitHub上也有，下面附上連結：

https://github.com/ant-design/ant-design/issues/12011

我們去控制台執行：

yarn add [email protected] -D
           

再去之前的home.jsl裡引入：

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';
           

在下面寫上：

儲存之後，執行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下加上：

這個配置是當通路404的時候，可以跳轉到首頁。

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

如果在點選路由的過程中出現這樣的報錯：

我們隻需要在使用了Link的地方加上：