5

I'm building a basic React/Flux application and using react-router-component for the routing, browser-sync for live reload on build changes, and browserify for dependency injection.

The problem that I have is that when the live reload or any reload occurs on a path that isn't / (i.e. /profile, /gallery, etc...), I get an error message of Cannot GET /path (or any route for that matter).

I suspect that this has something to do with the fact that it's a single page application and all routing is done on the client.

Here is my browser-sync setup (it's very basic). I think that I might need to add some middleware, but I'm not sure what to actually put in the middleware. 

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

2 回答 2

9

This is likely because whatever web server you're using to serve out your app is trying to actually find /profile or /gallery on the server side. You need to instruct your server that ALL requests to anything goes to root instead. Sometimes depending on your software this is called 'html 5 mode'.

I noticed that there's a post on the browser-sync git repo about this with possible solutions here: https://github.com/shakyShane/browser-sync/issues/204

But the basic idea is to make the server send everything that isn't *.js or *.css to ./index.html (assuming that is your app's entry-point file). That way the server doesn't look for those routes itself, and it just loads your app which is then free to parse them correctly on the client-side.

Hope this helps.

于 2014-09-13T00:20:45.593 回答
8

If you are using browserSync, then it would be like:

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


server : {
          baseDir:'./(anydirectory)',
          middleware: [ historyApiFallback() ]
        }
于 2015-11-19T08:10:06.080 回答