React 運行構建后空白屏幕

Question

我創建了一個反應應用程序，它在我運行npm start時運行，但是當我運行npm run build時，它給我一個白屏。 我試圖修復它，但沒有修復。 有很多類似的問題，但這些解決方案都沒有解決我的問題。 我的代碼如下。

應用程序.jsx：

import React from 'react';
import Home from './pages/Home/Home'
import SignIn from './pages/Sign-In/Sign-In'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";


function App(){
    return(
    <BrowserRouter basename="/">
        <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/sign-in" element={<SignIn/>}/>
        </Routes>
    </BrowserRouter>
    )
}

export default App;

package.json：

  "homepage": ".",
  "name": "frontend",
  "version": "0.1.0",
  "type": "module",
  "private": true,

索引.js：

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';


createRoot(document.getElementById('root')).render(<App />)

index.html（構建后）：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>React Home</title>
    <script defer="defer" src="./static/js/main.3f6694dc.js"></script>
    <link href="./static/css/main.4026a363.css" rel="stylesheet">
</head>

<body>
    <div id="root"></div>
    <script src="../../../satishSite/frontend/src/index.js"></script>
</body>

</html>

Answer 1

我認為您在本地打開了“index.html”，這就是它顯示白屏的原因。

不要在本地打開“index.html”，嘗試將您的構建文件夾托管到任何服務器。 它在服務器上工作。

Answer 2

html 中的script應該看起來像<script src="/index.jsx" type="module"> ，它不需要 go 來自 root，並且 jsx 文件必須始終聲明為模塊。

您還應該使用 parcel 來為您的 html 文件提供服務

npm install parcel -D

package.json：

scripts: {
  "dev":"parcel serve index.html"
}

然后在控制台運行npm run dev

React 運行構建后空白屏幕

問題描述

2 個解決方案

解決方案1
0 2022-05-31 12:28:24

解決方案2
0 2022-05-31 12:50:09

React 運行構建后空白屏幕

問題描述

2 個解決方案

解決方案1 0 2022-05-31 12:28:24

解決方案2 0 2022-05-31 12:50:09

解決方案1
0 2022-05-31 12:28:24

解決方案2
0 2022-05-31 12:50:09