具有 React 前端路由的 Express 服务器，无需服务器端渲染

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 错误...

我现在不想使用带有 React 中间件（我以前使用过）的服务器端渲染，那么有什么办法让它工作吗？

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