React Router browserHistory not working as expecte

Question

As a User i want to access content via going direkt on an deep url

Situation

On the Main Page i have a link to "about" page. clicking on the the Content changes as expected. The Page gets loaded and the url changes to localhost:8080/about.

If I now refresh the Page i get the error:

Cannot GET /about

I wonder if this is the normal behavior or did I miss something out?

Routes:

var React = require('react');
var ReactRouter = require('react-router');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');

module.exports = (
  <Router history={browserHistory} >
    <Route path="/" component={Main}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
)

Main:

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;

module.exports = React.createClass({
  render: function() {
    return <div>
      <div>Header!!</div>
      {this.content()}
    </div>
  },
  content: function() {
    if(this.props.children) {
      return this.props.children
    } else {
      return (
        <div>
          <h1>Main</h1>
          <Link to={'about'}>To about</Link>
        </div>)
    }
  }
});

About:

var React = require('react');
module.exports = React.createClass({
  render: function() {
    return (<div>About</div>)
  }
});

And my package.json

{
  "name": "react-starter",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.0 ",
    "gulp-concat": "^2.6.0",
    "gulp-react": "^3.1.0",
    "gulp-sass": "^2.1.1",
    "gulp-server-livereload": "1.6.2",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "node-notifier": "^4.4.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {}
}

Answer 1

I had same problem. So as above @taion's answer told that we need to configure express server to make hot reloading with URLs in routes.

But if you don't want to put express server additionally just to make hot reloading work, use this to run your project.

webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors

Earlier, I was using just this which needs express server to be configured

webpack-dev-server --hot --inline

NOTE: But I still think, you need to configure for nginx when you'll deploy. The above commands I told are just for development purposes. So don't forget to look at this as @taion told.

Answer 2

If you are serving you react app with nginx only, you need to add this code for the / location, like this:

location / {
    try_files $uri $uri/ /index.html =404;
}

That's all.

Answer 3

When using browserHistory, you must configure your server appropriately to serve at all routed paths. See this for details.

Answer 4

If you're using gulp-server-livereload, just add the fallback property pointing to your index

gulp.src(['dist'])
  .pipe(livereload({
    livereload: true,
    defaultFile: 'index.html',
    fallback: 'index.html',
    log: 'debug'
  }))