2016-12-23 5 views
0

ノードアプリケーションに店舗プロファイルの異なるページのルートがあります。グーグルでは、私はパラメータを編集することができます知っているが、私は絶対にどのように名前に基づいて(Reactでロード)コンテンツを変更するか分からない。私はres.render()を使って特定のページをレンダリングしています。Route-Node.js/Reactに基づいて異なるコンテンツを表示する

たとえば、https://www.instagram.com/adidasは、https://www.instagram.com/nikeとは異なる内容を示しますが、同じHTML構造と基本プロファイルのHTMLを持っています。それはただ異なるコンテンツです!

今、各プロファイルのhtml構造であるstore.ejsがあります。

名前/ IDに基づいてコンテンツを変更して読み込む方法の例を教えてください。

+0

リアクションはサーバー上の強固なマークアップまたは静的なマークアップにレンダリングすることができるので、ejsを必要としない場合もあります。 – walkerrandophsmith

+0

@WalkerRandolphSmithエクスプレスアプリでjadeやejsを使用する必要はありませんか? –

+0

あなたはそうではありません。 – walkerrandophsmith

答えて

2

おそらくあなたが探しているルートパラメータです。

app.get('/:name', (request, response) => { 
    let locals = { 
    name: request.params.name, 
    foo: 'bar' 
    }; 

    res.render('store.ejs', locals); 
}); 

ローカル変数は、テンプレートファイル内で参照できます。その後/rohitに移動

<h1>Hello <%= name %></h1> 
<button><%= foo %></button> 

は、次のマークアップを含むページをレンダリングするために起こっています。言っ

<h1>Hello rohit</h1> 
<button>bar</button> 

は、アプリケーションのルートを構築するために他の多くの方法があるので、 routing docsを読んで、間違いなく価値があります。

+0

ありがとうDan。私は小さなサンプルを手に入れてドキュメンテーションを読むことができました。私は、もっと複雑な例でこれがどのくらい正確に成り立っているのだろうと思っていました。 <%= name %> jsonファイルから読み込むための条件付きロジックが必要ですか?どのようにして、私はどのようにして大きなコンテンツを扱うのですか? –

+0

これは実際に使用するテンプレート言語(例:ejs、pug、...)にまで下がります。私はいくつかの高速アプリケーションを見つけて、ルート/ビューを管理するための感覚を得るためにソースコードを読むことをお勧めします。 –

+0

必要なだけ多くのテンプレートファイルを定義することができ、必要に応じてアプリケーションのルーティングを複雑にすることができ、レンダリング時に必要なローカル変数を公開できます。 –

関連する問題