ReactJS routing / browser-sync reload on / path generates a Can not Get / Path error

Question

I am building a basic React / Flux application and using the response-router component for routing, browser synchronization for live reloads when assembly changes, and scrolling for dependency injection.

The problem that occurs to me is that when a reboot or any reboot occurs along a path that is not "/" (for example, "/ profile", "/ gallery", etc.), I get a message about error message Can not GET / path (or any route, for that matter).

I suspect that this has something to do with the fact that the client runs a single-page application and all routing.

Here is my browser sync setting (very simple). I think that I may need to add some middleware, but I'm not sure if I really want to use middleware.

gulp.task('browser-sync', function() { browserSync({ server: { baseDir: './client' }, notify: false }); }); 

Answer 1

This is probably because any web server that you use to service your application is trying to find a / profile or / gallery on the server side. You need to tell the server that ALL requests for something are sent instead of root. Sometimes, depending on your software, this is called "html 5 mode".

I noticed that there is a link to relay browser-sync git here with possible solutions here: https://github.com/shakyShane/browser-sync/issues/204

But the main idea is for the server to send everything that is not * .js or * .css to. /index.html (assuming this is the file of your application entry point). Thus, the server does not search for these routes itself, and it just downloads your application, which then freely and correctly analyzes them on the client side.

Hope this helps.

Answer 2

If you use browserSync, it will look like this:

 var historyApiFallback = require('connect-history-api-fallback'); server : { baseDir:'./(anydirectory)', middleware: [ historyApiFallback() ] }