重构之路：配置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的地方加上：