如何从数据库中获取react.js路由列表？
如何从数据库中获取react.js路由列表？
提问于 2016-03-09 15:18:00
所以我有node.js + react和react路由器，我想从数据库中的列表中生成路由。我怎么能做这样的事？
<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并基于它生成路由。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-03-10 13:54:03
假设您可以在代码中以数组的形式获取所需的数据，您可以这样做：
// 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>Stack Overflow用户
发布于 2016-05-13 23:40:08
事实证明，react路由器已经有了对象模式，所以当您将路由存储在db中时，您可以使用它：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35895550
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号