Normalerweise sieht unsere S3 gehostete Webapp index.html so aus:
%Vor%Das bezieht sich auch auf das JS Bundle & amp; was React rendert und das ist in Ordnung. Aber einige Elemente der Website werden statisch für Geschwindigkeit & Amp; SEO und aussehen wie:
%Vor% Herkömmliche Weisheit könnte vorschlagen, das statische Zeug in einer ReactJS-Komponente und dann reactDOM.renderToString() zu haben, aber ich möchte es nicht so machen, da es ziemlich kompliziert ist, da die statische Komponente von vielen verschiedenen APIs kommt .
Ich habe also Mühe, eine Dokumentation für das zu finden, was ich will. Ich möchte für bestimmte URLs sagen können, dass ein ganzer Seitenladevorgang notwendig ist ( window.location ). Wenn Sie von einer statischen Seite mit Inhalten weg navigieren, ist eine vollständige Seitenladung erforderlich, oder der Inhalt muss wieder auf <div class=app> zurückgesetzt werden.
Wie erreiche ich das mit einem reaktiven Router?
Das ist etwas, mit dem ich von ganz oben gehen würde. Ich entschuldige mich, wenn es nicht Ihren Bedürfnissen / Ihrem Zweck entspricht. Ich denke Ich verstehe, was Sie anstreben. Ich könnte das falsch haben, aber ich denke, dass deine statischen Seiten keine Reaktionsroute auf ihnen haben. Wörtliche statische Seiten außerhalb der Reaktionsumgebung.
Ich würde eine Whitelist für diese statischen Seiten erstellen.
const whitelist = ['aboutus', 'Hilfe']
Dann würde ich auf meinen Routen den Fallthru haben, nach dem Pfad suchen.
%Vor%oder Sie können die statischen Seiten einfach so vorgeben:
vielleicht eine URL wie "/static?aboutus.html"
%Vor%Wenn du zur "react-route react" -App zurückkommst, würde ich nicht denken, dass du irgendetwas tun musst, da der Reaktiv-Router von der URL, zu der du zurückgehst, wieder auftaucht.
Sie können auch den "Listener" für das Location-Event verwenden.
%Vor%Ich hoffe, ich bin nicht zu weit von meiner Interpretation entfernt, wenn ich es bin. Lass es mich wissen und ich lösche meine Antwort.
Tags und Links reactjs react-router