Отображать различные компоненты на стороне клиента и сервера

В настоящее время я занимаюсь разработкой веб-сайта, на котором я использовал реакцию, реакцию-маршрутизатор и редукцию. Мы делаем рендеринг на стороне сервера и также используем ретранслятор на сервере. Теперь у меня есть случай, когда я хочу, чтобы клиентская сторона отображала другой компонент, чем серверная. Я так хочу.

Клиентская сторона

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

Сторона сервера

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

У меня есть случай использования, например, когда пользователь щелкает изображение. Я хочу открыть модальный контент и рекомендовать изображения. когда пользователь нажимает на рекомендуемые изображения, тот же модальный должен заполнить детали, и я тоже хочу изменить маршрут. Тот же маршрут при открытии в новом окне должен открыть html-страницу для facebook и google, чтобы отменить метатеги из нее.

Таким образом, я предоставляю другой компонент на клиенте и сервере. Но это тоже имеет проблемы, потому что тогда мне нужно найти способ отключить клиентский клиентский маршрутизатор, когда сервер обслуживает отображаемую страницу.

Или на стороне клиента генерирует изменение псевдо-маршрута, которое изменяет URL-адрес, но не отображает компонент.

Ответ 1

Проверьте наличие window и условно установите компонент, который вы хотите использовать следующим образом:

let Handler;

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

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

Нарушитель тревоги во мне хочет знать, почему вы это делаете:)

Ответ 2

проверить process.env.Browser

let Handler;

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

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