Render different components on client and server side

Question

I am currently developing a website where I have used react, react-router and redux. We are doing Server side rendering and using react router on server as well. Now I have a case where i want client side to render different component than server side. I want like this.

Client Side

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

Server Side

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

I have use case like when user click's an image i want to open a modal with contents and recommend images . when user click's on recommended images same modal should fill up the details and i want to change the route as well. Same route when opened in new window should open an html page for facebook and google to scrap meta tags from it.

So either I render different component on client and server. But that too has a problem because then i need to find a way to turn off client side react router when server is serving the rendered page.

Or in client side generate a pseudo route change which changes url but doesn't render a component.

Answer 1

Check if window is present and conditionally set the component you want to use like this:

let Handler;

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

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

The troublemaker in me wants to know why you're doing this :)