kann Fehler 404 beim Neuladen nicht erhalten?

Question

mein reagieren Router arbeitet mit dev env gut, ist es das, was ich in webpack Dev-Server hat:

historyApiFallback: { 
    index: 'index.html', 
} 

so im Produktionsmodus ich das gleiche tun wollte, ich habe es in Eil wie folgt aus:

Ich habe nichts mit react-router-dom geändert, also nehme ich an, dass der Fehler in meiner Expresskonfiguration ist. Also was entspricht historyApiFallback im Produktionsmodus? unten ist mein webpack Bündel config:

output: { 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js', 
    publicPath: '/public/' 
    }, 

in meinem html ich das Bündel wie diese Referenz:

<script type="text/javascript" src="/public/bundle.js"></script> 

Ich denke, eine die richtige Konfiguration hat, aber wenn ich kann mich nicht Fehler nachladen bekommen und 404?

Answer 1

Sie sollten diese Zeile zu Ihrer App hinzufügen:

app.get('*', function (_, res) { res.sendFile(indexPath) }); 

Oder sollten Sie dieses Paket verwenden, besser: https://github.com/bripkens/connect-history-api-fallback

Sie sollten mehr über history Modus lesen:

Um von der loszuwerden Hash können wir den Verlaufsmodus des Routers verwenden, der die history.pushState-API nutzt, um eine URL-Navigation ohne erneutes Laden der Seite zu erreichen:

Wenn der Verlaufsmodus verwendet wird, sieht die URL "normal" aus, z. http://oursite.com/user/id. Schön!

Hier kommt jedoch ein Problem: Da unsere App ist eine einzelne Seite clientseitige App, ohne eine ordnungsgemäße Serverkonfiguration, erhalten die Benutzer eine 404-Fehler, wenn sie auf http://oursite.com/user/id direkt in ihrem Browser zugreifen. Das ist jetzt hässlich.

Keine Sorge: Um das Problem zu beheben, müssen Sie nur eine einfache Fallback-Route zu Ihrem Server hinzufügen. Wenn die URL nicht mit statischen Inhalten übereinstimmt, sollte sie dieselbe index.html-Seite wie Ihre App enthalten.