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

Question

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'))

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

Answer 1

将 contentBase 用作“.”不是 '。/'。然后重新运行启动和开发命令。

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

Cannot GET /aboutus page after refreshing in react router 4.2 using webpack 3.8

reactjs

react-router

browser-history