webpack实战——解决单页面应用路由问题(五)

在src目录下新建list.js 和 home.js
list.js

import React, { Component } from 'react'
class List extends Component {
    render() {
        return <div>ListPage</div>
    }
}
export default List

home.js

import React, {Component} from 'react'
class Home extends Component {
    render() {
        return <div>HomePage</div>
    }
}
export default Home

需求: 通过访问api/list 就访问list页面, 访问api/home就访问home页面
安装前端路由模块:

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

index.js

import React, {Component} from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom' 
import Home from './home.js'
import List from './list.js'

class App extends Component{
    render() {
        return(
            <BrowserRouter>
                <div>
                    <Route path='/' exact component={Home}></Route>
                    <Route path='/list' component={List}></Route>
                </div>
            </BrowserRouter>
        )
    }
}

ReactDom.render(<App/>, document.getElementById('root'))

devServer.historyApiFallback

参考文档: https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback

注意: 添加 historyApiFallback: true
webpack.config.js

devServer: {
        contentBase: './dist',  //在哪个目录下启动服务器
        open: true,
        port: 8080,
        hot: true, //热更新
        hotOnly: true,
        proxy: {
            '/react/api': {
                target: 'http://www.dell-lee.com',
                pathRewrite: {
                    'header.json': 'demo.json' //实际是去请求demo.json的数据
                },
                changeOrigin: true  //不对源做限制
            } 
        },
        //当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用
        historyApiFallback: true
    },

运行npm run start,
访问http://localhost:8080,显示HomePage
访问http://localhost:8080/list, 显示ListPage