Renderuj różne komponenty po stronie klienta i serwera.

Question

Obecnie tworzę stronę internetową, na której użyłem systemu reagowania, routera reakcji i redux. Wykonujemy renderowanie po stronie serwera i za pomocą routera reagujemy również na serwerze. Teraz mam przypadek, w którym chcę, aby strona klienta renderowała inny komponent niż serwer. Chcę tak.

Side Client

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

Server Side

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

mam przypadek użycia takiego kiedy użytkownik click to obraz chcę otworzyć modalnego z treścią i polecić obrazów. gdy użytkownik kliknie na polecane obrazy, ten sam modalny powinien wypełnić dane i chcę również zmienić trasę. Ta sama trasa po otwarciu w nowym oknie powinna otworzyć stronę html dla Facebooka i google, aby usunąć z niej metatagi.

Tak więc albo renderuję inny komponent na kliencie i serwerze. Ale to też ma problem, ponieważ wtedy muszę znaleźć sposób na wyłączenie routera reagującego po stronie klienta, gdy serwer obsługuje renderowaną stronę.

Lub po stronie klienta wygenerować zmianę pseudo trasy, która zmienia adres URL, ale nie renderuje komponentu.

Answer 1

Sprawdź, czy window jest obecny i warunkowo ustawić składnik, którego chcesz używać tak:

let Handler; 

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

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

kłopoty we mnie chce wiedzieć, dlaczego to robisz :)

Answer 2

proces wyboru. env.Browser

let Handler; 

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

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