顯示基於路由的不同內容 - Node.js/React

我在我的Node應用程序中有不同頁面的商店配置文件路由。一直在使用Google，我知道我可以編輯參數，但我完全不知道如何根據名稱更改內容（使用React加載）。我只是使用res.render（）來渲染特定頁面。顯示基於路由的不同內容 - Node.js/React

例如，https://www.instagram.com/adidas顯示與https://www.instagram.com/nike不同的內容，但它們具有相同的HTML結構和基本配置文件HTML。這只是不同的內容！

現在，我只需要一個store.ejs即每個配置文件的html結構。

如何根據名稱/ ID更改和加載內容的示例是什麼？

來源

2016-12-23 Rohit Tigga

React可以呈現給服務器上的強或靜態標記，所以你可能甚至不需要ejs。 – walkerrandophsmith

@WalkerRandolphSmith我不需要在快速應用程序中使用jade或ejs嗎？ –

不，你不是。 – walkerrandophsmith

路由參數可能是你要找的。

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

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

局部變量可以在模板文件中引用。

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

然後導航到/rohit是要渲染包含以下標記的頁面。

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

也就是說，還有很多其他的方法來建立應用程序的路線，所以這絕對是值得一讀的routing docs。

來源

2016-12-23 00:11:46

謝謝丹。我能夠得到這個小例子的工作，並通過文檔。我想知道，這個更大更復雜的例子究竟如何發揮。我需要條件邏輯從<%= name %>讀取json文件嗎？我究竟如何處理不同的大量內容？ –

這真的歸結爲您決定使用的模板語言（例如ejs，pug，...）。我建議找到一些快速應用程序並閱讀他們的源代碼以獲得管理路線/視圖的感覺。 –

另外請記住，您可以根據需要定義多個模板文件，並且可以根據需要使應用程序的路由儘可能複雜，從而在呈現時顯示您想要的任何局部變量。 –

顯示基於路由的不同內容 - Node.js/React

回答

相關問題