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