React-Routing 基本示例路径不起作用

Question

尝试从here运行基本示例

我有 Yarn+Webpack2+Babel es2015

这是我的切入点：

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

     const BasicExample = () => (
        <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
            </div>
        </Router>
    );

    const Home = () => (
        <div>
            <h2>Home</h2>
        </div>
    );

    const About = () => (
        <div>
            <h2>About</h2>
        </div>
    );

    ReactDOM.render(
        <BasicExample/>,
        document.getElementById('root')
    );

http://localhost:8080 的项目开始良好，链接工作正常，从 Home 和 About 组件呈现内容。

但是当我尝试输入 url http://localhost:8080/about - 控制台显示我

GET http://localhost:8080/about 404（未找到）

我在 Stack 上发现了许多几乎相同的问题，但没有找到适合我的解决方案。
react-router 拦截传入的 url 到底是什么？
由于我的 Yarn\Webpack 设置，这可能不起作用？

____________UPDATE_1 Webpack 配置

const path = require('path');
let webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: path.join(__dirname, 'index.html'),
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    /*devServer: {
        host: "DESKTOP-A5FTMD8", // Can change port
        port: 8080
    },*/
    entry: path.join(__dirname, 'index.jsx'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        loaders: [
            {test: /\.(less|css)$/, loader: 'style-loader!css-loader!less-loader'},
            {test: /\.(xml)$/, loader: 'xml-loader'},
            {test: /\.(svg|png|jpg|jpeg)$/, loader: 'file-loader'},
            {
                test: /\.(js|jsx|es6)$/,
                exclude: /node_modules/,
                loader: 'react-hot-loader!babel-loader?presets[]=react,presets[]=es2015'
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.es6']
    },
    plugins: [
        HtmlWebpackPluginConfig
    ]
};

Answer 1

这个方案在 webpack config 中解决的问题：

devServer: {
    historyApiFallback: true <-- this needs to be set to true
}

This answer