React/NodeJS - 访问 localhost:3000 时网页无法正常工作

Question

首先我想说我是 React 和 NodeJS 的新开发者。

我想使用以下技术： - 作为客户做出反应 - NodeJS 作为服务器 - 用于构建我的文件的 Webpack。

我的项目结构如下：

我的应用程序/

webpack.server.js

webpack.client.js

server.js

client/client.js

客户端/app.js

客户端/组件/header.js

客户端/组件/mainLayout.js

客户端/组件/footer.js

页眉和页脚文件并不重要，所以我不在这里写。 重要文件如下：

ma​​inLayout.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":{}}。

我不明白为什么我有这个错误，有些东西可能让我逃跑了，但我不明白。

你能帮帮我吗？

提前谢谢你， 作为

Answer 1

您在同一个端口上同时运行前端和后端。转到您的 react 应用程序的 package.json 并将您的启动脚本替换为以下脚本：

"scripts": {
    "start": "set PORT=3007 && react-scripts start",
     // the rest of your scripts
}

这是解决您的问题的第一步。如果之后您不断收到错误，请告诉我们它们是什么。

Answer 2

我使用npm 再次运行了该应用程序。

在我输入的命令中：npm start 在应用程序文件夹中之后它再次工作。

Answer 3

这可以来自您正在使用的浏览器。 复制地址栏上的本地主机地址并粘贴到其他浏览器上，建议使用 Chrome。 这是基于个人经验。它一直在 Opera 浏览器上滚动，直到我在 Chrome 上打开它。