React-router "Cannot GET /*" except for root url

Question

I am willing to use React-router for my application, and I am trying the example given in the doc first, which I copied below. Now when I go to localhost:3000/, I see "App" as expected, but every other page, such as localhost:3000/inbox returns "Cannot GET /inbox". What am I missing here ?

var About = React.createClass({   render: function () {     return <h2>About</h2>; }});  var Inbox = React.createClass({   render: function () {     return <h2>Inbox</h2>; }});  var App = React.createClass({   render () {     return (       <div><h1>App</h1>         <RouteHandler/>       </div> )}});  var routes = (   <Route path='/' handler={App}>     <Route path="about" handler={About}/>     <Route path="inbox" handler={Inbox}/>   </Route> ); 

Answer 1

If you are using webpack-dev-server there is an option called history-api-fallback. If set to true 404s will fallback to /index.html.

Add the option to devServer section of the Webpack config like this:

devServer: {     contentBase: 'app/ui/www',     devtool: 'eval',     hot: true,     inline: true,     port: 3000,     outputPath: buildPath,     historyApiFallback: true, }, 

Link to Webpack docs: https://webpack.js.org/configuration/dev-server/

webpack-dev-server docs on Github: https://github.com/webpack/webpack-dev-server

Answer 2

I believe the issue is that you are making a http resource request:

GET /inbox HTTP/1.1 Host: localhost:3000 

but are using client-side only routing. Are you intending on doing server side rendering too? You might need to change your router location to be HistoryLocation instead of HashLocation (the default).

The location prop of Router.run tells it where to match the routes against. If you're not running server side React, I believe you have to use Router.HashLocation (or just leave it blank).

If not, you are accessing your component the wrong way. Try using http://localhost:3000/#/inbox. It can take a little to familiarize yourself with React-Router but it is definitely worth it!

React Router Documentation - HashLocation