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>
);

修改

我只想获得一个页面列表。所有页面都将使用相同的组件，但它们将具有不同的标题和内容。我可以查询数据库，但我不知道将对象传递给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已经有了对象模式，所以当您将路由存储在该结构的db中时，您可以使用它：

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

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

2 个答案: