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

node.js, reactjs, webpack

Solution

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;

Problem

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".

Original source