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

Question

onclick routing is going perfect but on refresh page not found error is coming. I am using react router 4.2 and webpack 3.8. when i am going to dashboard to about us component it is correctly routing but when we refresh that page there is coming an error can not get aboutus page. This is my 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;

and my package.json is

{
  "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"
  }
}

here is my index.jsx component.

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

I do not understand, What am I doing wrong? or What do I missed? please help me.

Answer 1

Use contentBase as '.' not './'. Then re-run start and dev command.