Render verschiedene Komponenten auf Client-und Server-Seite

Question

Ich entwickle derzeit eine Website, wo ich reagiere, reagiere-Router und redux. Wir machen Server-Side-Rendering und verwenden auch den Router auf dem Server. Jetzt habe ich einen Fall, wo ich möchte, dass Client-Seite andere Komponenten als Server-Seite rendern. Ich will so.

Client Side

<Route path="welcome/:id" component={Home} /> 

Server Side

<Route path="welcome/:id" component={App} /> 

I Use Case wie, wenn Benutzer klicken Sie ist ein Bild, das ich möchte eine modale mit Inhalt öffnen und Bilder empfehlen. Wenn der Benutzer auf empfohlene Bilder klickt, sollte das gleiche Modal die Details ausfüllen und ich möchte auch die Route ändern. Die gleiche Route, wenn in einem neuen Fenster geöffnet wird, sollte eine HTML-Seite für Facebook und Google öffnen, um Meta-Tags daraus zu entfernen.

Also ich render entweder andere Komponente auf Client und Server. Aber das hat auch ein Problem, denn dann muss ich eine Möglichkeit finden, Client-Seite reagieren Router deaktivieren, wenn Server die gerenderte Seite dient.

Oder in Client-Seite eine Pseudo-Route ändern, die URL ändert, aber keine Komponente darstellt.

Answer 1

Überprüfen Sie, ob window vorhanden ist und stellen Sie bedingt die Komponente, die Sie wie diese verwenden möchten:

let Handler; 

if (typeof window !== 'undefined') { 
    Handler = Home; 
} else { 
    Handler = App; 
} 

return <Route path="welcome/:id" component={Handler} /> 

Der Querulant in mir will wissen, warum Sie tun, um dieses :)

Answer 2

Prüfprozess. env.Browser

let Handler; 

if (process.env.browser) { 
    Handler = Home; 
} else { 
    Handler = App; 
} 

return <Route path="welcome/:id" component={Handler} />