React-Router funktioniert nicht in der Produktion und Surge-Bereitstellungen

Question

Meine Reaktion Anwendung funktioniert gut auf localhost, aber wenn ich es in Gh-Seiten oder surge es gibt mir nicht, um zwischen den Seiten mit URL zu bewegen.

• Dies ist das Repo-Projekt link
• Demo url here

Benutzer Seite anmeldet, indem Sie auf menuItem von rechts oben gehen kann. aber wenn Benutzer http://chat.susi.ai/signup/ URL verwenden, gibt es 404 Seite

Ich versuchte mehrere Lösungen aus dem Internet, aber nicht funktioniert.

Nächste Frage ist: Ich habe eine 404-Seite erstellt, um anzuzeigen, wenn Benutzer versucht, zu defekten Links zu verschieben. Es funktioniert gut in localhost. aber nicht in der Produktion. Ich habe versucht this Lösung, aber nichts geändert.

dies ist ein Teil meiner index.js

Datei

const App =() => (
    <Router history={hashHistory}> 
     <MuiThemeProvider> 
      <Switch> 
       <Route exact path="/" component={ChatApp} /> 
       <Route exact path="/signup" component={SignUp} /> 
       <Route exact path="/logout" component={Logout} /> 
       <Route exact path="/forgotpwd" component={ForgotPassword} /> 
       <Route exact path="*" component={NotFound} /> 

      </Switch> 
     </MuiThemeProvider> 
    </Router> 
); 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

Wenn jemand eine gute Lösung mit Beispielcode für meine Probleme vorschlagen kann, die für mich sehr hilfreich wäre.

Answer 1

Dies geschieht, weil Benutzer nicht die index.html bedient werden, die Ihre App bootstrappt, wenn sie diese URLs direkt besuchen.

Für Surge, können Sie add a 200.html file, die den gleichen Inhalt wie die enthält index.html Sie bereitstellen (oder benennen Sie es einfach zu 200.html) - das wird dann zu jeder URL für Benutzer bedient werden, die sie besuchen, die nicht einer entspricht statische Datei, damit Ihre App gestartet werden kann.

---

Bearbeiten: sieht aus wie Sie create-react-app verwenden. Dies funktioniert, wenn Sie lokal entwickeln, da create-react-app 's react-scripts Paket behandelt Ihre index.html als Ausweichlösung für diese Anforderungen dient.

Die react-scripts user guide hat Abschnitte auf how to handle this when deploying to GitHub Pages und surge.sh (wie oben).