ReactJS routing/sincronizzazione del browser reload on/percorso produce Can not Get/Path error

Question

Sto costruendo un'applicazione React/Flux di base e utilizzo react-router-component per il routing, sync del browser per il live ricaricamento sui cambiamenti di build, e browserify per l'iniezione di dipendenza.

Il problema che ho è che quando il live ricarica o qualsiasi ricarica si verifica su un percorso che non è "/" (cioè "/ profilo", "/ galleria", ecc ...), ottengo un messaggio di errore di Can not GET/path (o qualsiasi route per quella materia).

Ho il sospetto che questo abbia qualcosa a che fare con il fatto che si tratta di un'applicazione a singola pagina e tutto il routing è fatto sul client.

Ecco il mio setup di sincronizzazione del browser (è molto semplice). Penso che potrei aver bisogno di aggiungere del middleware, ma non sono sicuro di cosa mettere effettivamente nel middleware.

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

Answer 1

Ciò è probabilmente perché qualunque server web che si sta utilizzando per scontare la vostra applicazione sta cercando di trovare in realtà/profile o/galleria sul lato server. Devi istruire il tuo server che TUTTE le richieste a qualsiasi cosa vadano invece alla radice. A volte, a seconda del software, si parla di 'modalità html 5'.

ho notato che c'è un post sul browser-sync git repo di questo con possibili soluzioni qui: https://github.com/shakyShane/browser-sync/issues/204

Ma l'idea di base è quella di rendere il server invia tutto ciò che non è * .js o *. css a ./index.html (supponendo che questo sia il file del punto di ingresso della tua app). In questo modo il server non cerca le rotte stesse e carica semplicemente l'app, che è quindi libera di analizzarle correttamente sul lato client.

Spero che questo aiuti.

Answer 2

Se si utilizza browserSync, allora sarebbe come:

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


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