React-router with BrowserRouter / browserHistory doesn't work on refresh

Question

I have the following webpack config file:

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 + '/config/routes.jsx',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
  output: {
    publicPath: 'http://localhost:8080/src/client/public/'
  },
  module : {
    loaders : [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_DIR,
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      }, 
      {
        test: /\.json$/, 
        loader: "json-loader"
     }
    ]
  }
};

module.exports = config;

all I am trying to do is run my app on localhost, however when I hit: "http://localhost:8080/src/client/home" (as per my routes.jsx and after running webpack-dev-server)

import React from 'react';

import { Route, Router, browserHistory } from 'react-router';
import ReactDOM from 'react-dom';

import Wrapper       from './../components/wrapper.jsx';
import Home          from './../components/home.jsx';
import Projects      from './../components/projects.jsx';
import SingleProject from './../components/projectContent/singleProject.jsx';
import About         from './../components/aboutUs.jsx'

ReactDOM.render((
    <Router history={browserHistory} >
        <Route path="/" component={Wrapper} >
            <Route path="home" component={Home} />
            <Route path="projects" component={Projects} />
            <Route path="projects/:id" component={SingleProject} />
            <Route path="about" component={About} />
        </Route>
    </Router>
), document.getElementById('app'));

I get

"Cannot GET /src/client/home".

Answer 1

First thing you have mentioned in your routes as the home component to have path /home. So you need to visit http://localhost:8080/home. Also if you try to access this url directly, it will give you this error since you are using browserHistory. If you want you can use hashHistory or HashRouter in react-router v4, in which case you will need to visit http://localhost:8080/#/home. If you want to continue using browserHistory or BrowserRouter as in react-router v4, then you will need to add historyApiFallback: true in you webpack

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 + '/config/routes.jsx',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
  output: {
    publicPath: 'http://localhost:8080/src/client/public/'
  },
  devServer: {
    historyApiFallback: true
  },
  module : {
    loaders : [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_DIR,
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      }, 
      {
        test: /\.json$/, 
        loader: "json-loader"
     }
    ]
  }
};

module.exports = config;

Answer 2

You need to add this in your webpack settings:

devServer: {
  historyApiFallback: true,
}, 

And start your server like this:

webpack-dev-server --config webpack.config.js

Because you want React-Route to handle the route instead of your server. So no matter what the url is it should goes to index.html.