【发布时间】：2017-06-18 21:15:27
【问题描述】：
我们首次使用 MERN 堆栈构建项目。这是一个站立和复古应用程序。问题是我们的 react 组件事件在服务器端不起作用，但在客户端却完美运行。基本上，我们可以使用 React 提供静态页面，但不能使用 Node 和 Express 作为服务器时更新和保存状态的动态页面。非常感谢修复此块的任何帮助。
我们已经用react-app 初始化了我们的项目。
我们的 package.json 看起来像这样：
{
"name": "standup",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"ejs": "^2.5.5",
"express-react-engine": "^0.6.0",
"express-react-views": "^0.10.2",
"http-server": "^0.9.0",
"mocha": "^3.2.0",
"react-router": "^3.0.2",
"react-scripts": "0.8.5",
"should": "^11.2.0",
"supertest": "^3.0.0"
},
"dependencies": {
"body-parser": "^1.16.0",
"express": "^4.14.1",
"react": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
当我们运行 npm start 并访问 localhost:3000 时，我们会得到这个动态更新的视图：
client side rendering screenshot
当我们使用nodemon --exec babel-node --presets 'react,es2015' src/server.js 打开节点服务器时，所有按钮都不起作用。
“网络”选项卡中唯一明显的区别是 Bundle.js。服务器端没有加载哪个。
This is our Express server:
import path from 'path';
import {Server} from 'http';
import Express from 'express'
import React from 'react';
import { renderToString } from 'react-dom/server';
import HomePage from './components/HomePage'
import RetroPage from './components/RetroPage'
import StandupPage from './components/StandupPage'
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
console.log(path)
app.use(Express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
let markup = renderToString(<HomePage />)
res.render('index', {markup});
});
app.get('/standup', (req, res) => {
let markup = renderToString(<StandupPage/>)
res.render('index', {markup})
})
app.get('/retro', (req, res) => {
let markup = renderToString(<RetroPage/>)
res.send(markup);
})
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
})
我没有在这里展示 React 组件，因为我们知道它们在客户端工作得很好。
当我们发送请求但无法解决问题时，我们认为我们在 Express 路由中遗漏了某些内容。
谢谢！
【问题讨论】：
-
我不确定我是否遵循您的操作。您是否尝试进行服务器端渲染？你确定要通过 react-router 从一个页面移动到另一个页面吗？我只见过像下面这样的 React 项目：前端的 React 和一个由 React 项目调用的 Node/Express REST API .
标签： node.js reactjs express events serverside-javascript