使用 webpack 3.8 在反应路由器 4.2 中刷新后无法获取 /aboutus 页面答案

【问题标题】：Cannot GET /aboutus page after refreshing in react router 4.2 using webpack 3.8使用 webpack 3.8 在反应路由器 4.2 中刷新后无法获取 /aboutus 页面
【发布时间】：2018-05-21 06:24:27
【问题描述】：

onclick 路由正在完善，但在刷新页面未找到错误即将到来。我正在使用反应路由器 4.2 和 webpack 3.8。当我将仪表板转到关于我们的组件时，它正在正确路由，但是当我们刷新该页面时，出现一个错误，无法获取关于我们的页面。这是我的 webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true
  },
  plugins: [
  new webpack.ProvidePlugin({ 
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery' 
  })
  ],
  watch: true,
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
};

module.exports = config;

我的 package.json 是

{
  "name": "react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "dev": "webpack -d --progress --colors --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^3.3.7",
    "create-react-class": "^15.6.2",
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "webpack": "^3.8.1"
  }
}

这是我的 index.jsx 组件。

import AwesomeComponent from './awesomecomponent.jsx';
import Dashboard from './dashboard.jsx';
import App from './app.jsx';
import AboutUs from'./aboutus.jsx';
import React from 'react';
import {render} from 'react-dom';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Prompt, Switch} from 'react-router-dom'

ReactDOM.render((
  <Router>
    <Switch>
        <Route exact path='/' component={Dashboard} />
        <Dashboard>
            <Route path='/aboutus' component={AboutUs} />
        </Dashboard>
        <Route path='/awesomecomponent' component={AwesomeComponent} />
    </Switch>
  </Router>
), document.getElementById('app'))

我不明白，我做错了什么？或者我错过了什么？请帮帮我。

【问题讨论】：

标签： reactjs react-router browser-history

【解决方案1】：

使用 contentBase 作为 '.'不是 '。/'。然后重新运行 start 和 dev 命令。

【讨论】：