具有无服务器端渲染的 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');
}

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

Express server with React front end routing without server side rendering

node.js

express

reactjs

react-router

server-side-rendering