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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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;

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0