首先我想说我是 React 和 NodeJS 的新开发者。
我想使用这项技术: - 作为客户端使用react - NodeJS 作为服务器 - 用于构建我的文件的 Webpack。
我的项目结构如下:
我的应用程序/
webpack.server.js
webpack.client.js
服务器.js
客户端/client.js
客户端/app.js
客户端/组件/header.js
客户端/组件/mainLayout.js
客户端/组件/footer.js
页眉和页脚文件并不重要,所以我不在这里写。 重要文件如下:
mainLayout.js
import React, { Component } from 'react';
// import component
import Header from './header';
import Footer from './footer';
class MainLayout extends React.Component {
constructor (props) {
super(props)
}
render() {
return (
<div className="App">
<Header />
{this.props.children}
<Footer />
</div>
);
}
}
export default MainLayout;
app.js
import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';
import MainLayout from './components/mainLayout'
const AppComponent = () =>
<Switch>
<Route path="/" exact render={props => (
<MainLayout>
<h1>Hello World</h1>
</MainLayout>
)} />
</Switch>
;
export default AppComponent;
client.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import AppComponent from './app';
ReactDOM.hydrate(
<BrowserRouter>
<AppComponent />
</BrowserRouter>,
document.querySelector('#root')
);
server.js
import express from 'express';
import React from 'react';
import AppComponent from './client/app'
var app = express();
const PORT = 3000;
app.use("/", express.static("build/public"));
app.get("/", (req, res) => {
res.send(<AppComponent />)
});
app.listen(PORT, () => console.log('Now browse to localhost:3000'));
运行我的项目:
npm run build
npm run dev
但是当我去http://localhost:3000时我的页面响应是 {"key":null,"ref":null,"props":{},"_owner":null,"_store":{}}。
我不明白为什么会出现这个错误,我可能漏掉了一些东西,但我不知道是什么。
你能帮我一下吗?
提前谢谢您, AS
最佳答案
您正在同一端口上运行前端和后端。转到您的 React 应用程序的 package.json 并将启动脚本替换为以下脚本:
"scripts": {
"start": "set PORT=3007 && react-scripts start",
// the rest of your scripts
}
这将是解决您的问题的第一步。如果此后您仍然收到错误,请告诉我们它们是什么。
关于javascript - React/NodeJS - 当访问 localhost :3000 时网页无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53610300/