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

Question

所以我有 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>
);

编辑

我只想获取页面列表。所有页面都将使用相同的组件，但它们将具有不同的标题和内容。我可以查询数据库，但我不知道将 object 传递给 reactjs 并基于它生成路由。

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

Answer 2

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

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

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

How do I get a list of react.js routes from a database?

mongodb

node.js

reactjs

react-router