/ path上的ReactJS路由/浏览器同步重新加载产生无法获取/路径错误

Question

我正在构建一个基本的React/Flux应用程序,并使用react-router-component进行路由,使用browser-sync进行构建更改的实时重新加载,并使用browserify进行依赖注入.

我的问题是,当现场重装或重装这不是一个路径上发生/(即/profile,/gallery等...),我得到的不能得到一个错误信息/path(或与此有关的任何途径).

我怀疑这与它是单页应用程序并且所有路由都在客户端上完成这一事实有关.

这是我的浏览器同步设置(这是非常基本的).我认为我可能需要添加一些中间件,但我不确定实际放入中间件的内容.

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

Answer 1

这可能是因为您用来提供应用程序的任何Web服务器都试图在服务器端实际查找/配置文件或/ gallery.您需要指示您的服务器对所有内容的所有请求都转到root.有时根据您的软件,这被称为'html 5模式'.

我注意到浏览器同步git repo上的帖子有关于此的可能的解决方案:https://github.com/shakyShane/browser-sync/issues/204

但基本的想法是让服务器将所有不是*.js或*.css的内容发送到./index.html(假设这是你的应用程序的入口点文件).这样服务器本身就不会查找这些路由,而只是加载你的应用程序,然后可以在客户端正确解析它们.

希望这可以帮助.

Answer 2

如果您使用的是browserSync,那么它将是:

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


server : {
          baseDir:'./(anydirectory)',
          middleware: [ historyApiFallback() ]
        }