重构之路：配置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就好了
复制代码