ReactJS Routing/Browser-Sync Reload auf/Pfad produziert Kann nicht Get/Path error

Question

Ich baue eine grundlegende React/Flux-Anwendung und mit react-Router-Komponente für das Routing, Browser-Sync für Live-Reload auf Build-Änderungen, und browsen für die Abhängigkeitsinjektion.

Das Problem, das ich habe, ist, dass, wenn das Live-Nachladen oder Neuladen auf einem Pfad auftritt, der nicht "/" ist (zB "/ profile", "/ gallery", etc ...), bekomme ich Fehlermeldung von Can not GET/path (oder irgendeine Route für die Angelegenheit).

Ich vermute, dass dies etwas mit der Tatsache zu tun hat, dass es eine einzelne Seite Anwendung ist und alles Routing auf dem Client erfolgt.

Hier ist mein Browser-Sync-Setup (es ist sehr einfach). Ich denke, dass ich vielleicht etwas Middleware hinzufügen muss, aber ich bin mir nicht sicher, was ich eigentlich in die Middleware schreiben soll.

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

Answer 1

Dies ist wahrscheinlich, weil alles, was Web-Server, den Sie mit Ihrer App tatsächlich versucht, dienen, um/profile oder/Galerie auf der Server-Seite. Sie müssen Ihren Server anweisen, dass ALLE Anfragen an irgendetwas stattdessen an root gehen. Manchmal wird dies, abhängig von Ihrer Software, 'html 5 mode' genannt.

Ich bemerkte, dass es ein Beitrag auf dem Browser-sync git Repo darüber mit möglichen Lösungen hier: https://github.com/shakyShane/browser-sync/issues/204

aber die Grundidee ist der Server senden, alles zu machen, die nicht * Js oder * ist. css to ./index.html (unter der Annahme, dass dies die Einstiegspunktdatei Ihrer App ist). Auf diese Weise sucht der Server nicht selbst nach diesen Routen und lädt nur Ihre App, die dann frei ist, sie auf der Client-Seite korrekt zu analysieren.

Hoffe, das hilft.

Answer 2

Wenn Sie browserSync verwenden, dann wäre es wie:

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


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