Question

我在我的快递应用程序中在服务器上渲染我的React-router。这是我的代码

app.use((req, res) => {

match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
console.log(renderProps)
if (error) {
  res.status(500).send(error.message)
} else if (redirectLocation) {
  res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
  let component = renderToString(<RoutingContext {...renderProps}/>);

  var html = renderToStaticMarkup(body(null,
      div({id: 'content', dangerouslySetInnerHTML: {__html:component}}),
      script({src: '/js/main.js'})
  ))
  res.end(html)
    } else {
      res.status(404).send('Not found')
    }
  })
});

它的工作原理。我可以不刷新路由。但是在我的组件呈现之前我怎么能引用我的快速路由来查询我的数据库（不是ajax查询）..

Answer 1

您可以查询数据库并使用回调函数来捕获响应Web请求所需的变量，例如： res。或者，您可以使用生成器来yield数据库中的结果。您的解决方案对您正在使用的数据库和库非常重要。

以下是一个例子：

const mysql = require('mysql');
let connection = mysql.createConnection({ ... });

// ...

app.use((req, res) => {
  match({ routes, location: req.url}, (error, redirectLocation, renderProps) => {
    if (error) res.status(500).send(error.message);
    else if (redirectLocation) res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    else if (renderProps) {
      connection.query('SELECT 2 + 2 AS sample', (err, rows, fields) => {
        if (err) res.status(500).send(err);
        else {
          let fromDatabase = rows[0].sample;
          let component = renderToString(<RoutingContext {...renderProps} />);
          let html = renderToStaticMarkup(body(
            null,
            div({ id: 'content', dangerouslySetInnerHTML: { __html: component } }),
            script({ src: '/js/main.js' })
          ));
          res.end(html);
        }
      });
    } else {
      res.status(404).send('Not found');
    }
  });
});

// ...

使用react-router获取服务器端数据

1 个答案: