React-router with BrowserRouter / browserHistory does not work when updating

Question

I have the following webpack configuration 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 application on the local host, however when I hit: " http: // localhost: 8080 / src / client / home " (according to my routes.jsx and after starting the 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

The first thing you pointed out on your routes as a home component is to have the path /home . So you need to visit http://localhost:8080/home . Also, if you try to directly access this URL, it will give you this error, since you are using browserHistory . If you want, you can use hashHistory or HashRouter in response-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 response-router v4, you need to add historyApiFallback: true to your 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 to your webpack settings:

 devServer: { historyApiFallback: true, }, 

And start your server as follows:

 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 go to index.html.