如何从数据库中获取 react.js 路由列表？答案

【问题标题】：How do I get a list of react.js routes from a database?如何从数据库中获取 react.js 路由列表？
【发布时间】：2016-03-09 15:18:00
【问题描述】：

所以我有 node.js + react 和 react-router，我想从数据库中的列表中生成路由。我怎样才能做出这样的事情

<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并根据它生成路由。

【问题讨论】：

第一个问题：您为什么要尝试将其存储到数据库中？您是在尝试仅将路线存储在其中（为什么？），还是您也尝试在其中存储组件？还有，你有什么问题吗？查询数据库？迭代记录集？也许尝试将任务分解成更小的部分并尝试单独解决它们。
没有。我只想获取页面列表。正如我在示例中所说，它们都将使用相同的组件，但它们将具有不同的标题和内容。我可以查询数据库，但是我不知道热传递对象给reactjs并根据它生成路由。
您可以尝试使用普通对象，如页面底部所述。那么问题就相当于将数据库输出转换为纯js对象：github.com/reactjs/react-router/blob/master/docs/guides/…

标签： node.js mongodb reactjs react-router

【解决方案1】：

假设您可以在代码中以数组形式获取所需的数据，您可以执行以下操作：

// 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>

【讨论】：

【解决方案2】：

原来 react-router 已经有对象模式，所以当你将路由存储在该结构的数据库中时，你可以使用它：

https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md#configuration-with-plain-routes

【讨论】：