React/NodeJS - Web 頁面在 go at localhost:3000 時不工作

Question

首先我想說我是 React 和 NodeJS 的新開發者。

我想使用這種技術： - 作為客戶端反應 - 作為服務器的 NodeJS - Webpack 用於構建我的文件。

我的項目結構如下：

我的應用程序/

webpack.server.js

webpack.client.js

服務器.js

客戶端/client.js

客戶端/app.js

客戶端/組件/header.js

客戶端/組件/mainLayout.js

客戶端/組件/footer.js

header 和頁腳文件並不重要，所以我不寫在這里。 重要文件如下：

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;

應用程序.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;

客戶端.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')
);

服務器.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

您正在同一端口上運行前端和后端。 轉到package.json作為您的react應用程序，然后將啟動腳本替換為以下腳本：

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

這將是解決您的問題的第一步。 如果您在此之后仍然遇到錯誤，請告訴我們它們是什么。

Answer 2

這可以來自您正在使用的瀏覽器。 復制地址欄上的本地主機地址並粘貼到其他瀏覽器上，Chrome 建議這樣做。 這是基於個人經驗。 它一直在 Opera 瀏覽器上滾動，直到我在 Chrome 上打開它。

Answer 3

在 App.js 中，在導入中添加路由。 使用元素而不是組件。

例如：

import {BrowserRouter, Routes, Route, Link, Switch} from 'react-router-dom'
<Navbar />    
   <BrowserRouter>
      <Routes>
        <Route path="/" exact element = {</>}/>    
        <Route path="/" exact element = {</>}/>
      </Routes>
   </BrowserRouter>

Answer 4

我再次使用npm運行該應用npm 。

在我輸入的命令中： npm start再次在應用程序文件夾中npm start 。