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

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

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

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

希望这有帮助。

Answer 2

如果您使用的是browserSync，那就像是：

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


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

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

2 个答案: