React changing URL with react-router and webpack gives page not found error

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

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 in which case you will need to visit http://localhost:8080/#/home. If you want to continue using browserHistory, 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;

React changing URL with react-router and webpack gives page not found error

Sign up