如何從數據庫中獲取react.js路由列表？

所以我有node.js + react和react-router，我想從一個從數據庫中獲取的列表中生成路由。我怎麼能這樣做如何從數據庫中獲取react.js路由列表？

<Route component={App}> 
    <Route name="Home" path="/" component={Page}/> 
    <Route name="Page1" path="/page1" component={Page}/> 
    <Route name="Page2" path="/page2" component={Page}/> 
    ... 
</Route>

並在我的應用程序中使用它？我現在的文件是這樣的：

server.js

var express = require('express'); 
var bodyParser = require('body-parser'); 
... 
var routes = require('./app/routes'); 
... 
app.use(function(req, res) { 
    Router.match({ routes: routes.default, location: req.url }, function(err, redirectLocation, renderProps) { 
    if (err) { 
     res.status(500).send(err.message) 
    } else if (redirectLocation) { 
     res.status(302).redirect(redirectLocation.pathname + redirectLocation.search) 
    } else if (renderProps) { 
     var html = ReactDOM.renderToString(React.createElement(Router.RoutingContext, renderProps)); 
     //var page = swig.renderFile('views/index.html', { html: html }); 
     res.status(200).send('<!DOCTYPE html><html lang="ro"><head><link rel="stylesheet" href="./foundation-6/css/foundation.min.css"><link rel="stylesheet" href="./css/main.css"></head><body><div id="app"></div><script src="/socket.io/socket.io.js"></script></script><script src="./js/vendor.js"></script><script src="./js/vendor.bundle.js"></script><script src="./js/bundle.js"></script><script src="./foundation-6/js/foundation.min.js"></script><script>$(document).foundation();var socket = io();</script></body></html>'); 
    } else { 
     res.status(404).send('Page Not Found') 
    } 
    }); 
});

routes.js

import React from 'react'; 
import {Route} from 'react-router'; 
import App from './components/App'; 
import Page from './components/Page'; 

export default (
    <Route component={App}> 
    <Route name="Home" path="/" component={Page}/> 
    <Route name="Test" path="/test" component={Page}/> 
    </Route> 
);

編輯

我只想得到頁面列表。所有頁面將使用相同的組件，但它們將具有不同的標題和內容。我可以查詢數據庫，但我不知道將對象傳遞給reactjs並根據它生成路由。

來源

2016-03-09 Andrei Bratuleanu

第一個問題：爲什麼你想這個存儲到數據庫中？你是否試圖在那裏存儲路由（爲什麼？）或者你還試圖在那裏存儲組件？另外，你有什麼麻煩？查詢數據庫？迭代記錄集？也許嘗試將任務分解成更小的部分並嘗試單獨解決。 –

不，我只想獲得一個頁面列表。正如我在示例中所說的，它們都將使用相同的組件，但它們將具有不同的標題和內容。我可以查詢數據庫，但我不知道將對象傳遞給reactjs並根據它生成路由。 –

您可以嘗試使用簡單對象，如頁面底部所述。然後，這個問題相當於將數據庫輸出轉換爲普通的js對象： https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md#user-content-configuration-with - 標準的路由 –

假設你可以得到你需要爲你的代碼中的數組中的數據，你可以做這樣的事情：

// assuming data is like [{path:'/', name:'Home'}, {path: '/page1', name: 'Page 1'}, ...] 

<Route component={App}> 
    {data.map((obj, i) => { <Route name={obj.name} path={obj.path} component={Page}/> } 
</Route>

來源

2016-03-10 13:54:03 ewindsor