React routing not working while manually changing URL | React-router 4

Question

My Routing is working perfectly when URL is changed through Link component of React-router. However, if I try to change URL manually in browser, it hits 404 Error.

Below

Answer 1

When using BrowserRouter , you need to add historApiFallback: true in your webpack.

Add this to your webpack config

devServer: {
    historyApiFallback: true,
  },

The gulp equivalent would be something like:

historyApiFallback = require('connect-history-api-fallback')


//start a local dev server
gulp.task('connect', function() {
  connect.server({
    root: ['dist'],
    port: config.port,
    base: config.devBaseUrl,
    livereload: true,
    middleware: [ historyApiFallback() ]
  });
});

See this link for more details

Answer 2

if you are using webpack-dev-server. set:

devServer{
  //...
  historyApiFallback: true
}

it would serve 'index.html' in place of any 404 responses...

if you've published to server.make sure your server config make it redirect to main html

express:

app.get('/*', function(req, res) {
    res.sendfile('index.html');
});

gulp-connect:

connect.server({
  root: ['dist'],
  port: config.port,
  base: config.devBaseUrl,
  livereload: true,
  fallback: 'index.html'
});

Answer 3

This worked for me:

  var historyApiFallback = require('connect-history-api-fallback');

  gulp.task('connect', function() {
    connect.server({
      root: ['dist'],
      port: config.port,
      base: config.devBaseUrl,
      livereload: true,
      middleware: function(connect, opt) {
        return [
          historyApiFallback({})
        ]
      }
    });
  });

Thanks to @Shubham Khatri and @LinJI for all the help !