React Router browserHistory not working as expected

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 ch

Answer 1

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'
  }))

Answer 2

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 3

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

Answer 4

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.