Question

这是我的快速服务器设置

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


require('./api/accounts/signin')(app);
....

mongoose.connect(process.env.MONGO_URI);
mongoose.connection.on('error', function() {
    console.info('Error: Could not connect to MongoDB. Did you forget to run `mongod`?');
});

app.set('super-secret', process.env.APP_SECRET)

module.exports = app;

现在，当我在localhost：3000启动我的应用程序时，它可以正常工作所有路由，但是当我尝试继续使用localhost：3000 / login或其他路由时，我收到Cannot GET /login错误。

我不想将服务器端渲染与反应中间件（我之前使用过）一起使用，所以那么它是否仍然可以使它工作？

app.get('/*/*', function(req, res) {
  res.sendFile(path.join( __dirname, 'public/index.html'))
})



<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Doyouthink?</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/common.bundle.js"></script>
    <script src="js/polyfill.bundle.js"></script>
    <script src="js/vendor.bundle.js"></script>
  </body>

</html>

Answer 1

您只需要匹配所有路线并为它们提供包含您的捆绑包的基本html页面。然后，React Router将检查并URL并呈现相应的组件。

app.get("/", handleRender);
app.get("*", handleRender);

function handleRender(req, res){
  res.sendFile(__dirname + '/index.html');
}

具有React前端路由的Express服务器，无需服务器端呈现

1 个答案: