クライアント側とサーバー側で異なるコンポーネントをレンダリングする

Question

私は現在、私がreact、react-router、およびreduxを使用しているWebサイトを開発しています。私たちは、サーバー側のレンダリングを行い、サーバー上の反応ルータも使用しています。今私は、クライアント側がサーバー側とは異なるコンポーネントをレンダリングしたい場合があります。私はこのようにしたい。

クライアント側

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

サーバー側

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

私は、ユーザーのクリックが、私は内容でモーダルを開き、画像をお勧めしたい画像だときのようなユースケースを持っています。ユーザーがクリックしたときに推奨画像が表示されます。同じモーダルで詳細を入力する必要があります。また、経路も変更したいと考えています。新しいウィンドウで開いたときと同じルートは、facebookのhtmlページを開き、そこからメタタグをスクラップするようにgoogleする必要があります。

したがって、クライアントとサーバーで異なるコンポーネントをレンダリングします。しかし、それも問題があります。なぜなら、サーバーがレンダリングされたページを提供しているときに、クライアント側の反応ルータをオフにする方法を見つける必要があるからです。

または、クライアントサイドでは、URLを変更するがコンポーネントをレンダリングしない疑似ルート変更を生成します。

Answer 1

チェックwindowが存在し、条件付きで、あなたはこのように使用するコンポーネントに設定した場合：私の中

let Handler; 

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

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

トラブルは、あなたがこの:)

Answer 2

チェック処理をやっている理由を知りたがっています。 env.Browser

let Handler; 

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

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