npm 运行 build React 后出现白屏

Question

我使用 create-react-app 创建了一个反应应用程序。 当我执行npm start时，它运行良好。 但是在我使用npm run build并打开index.html它会抛出一个白屏。

相关代码如下。 请帮我找出问题所在。

应用程序.js

<React.StrictMode>
 <BrowserRouter>
  <Router />
 </BrowserRouter>
</React.StrictMode>

路由器.js

<Routes>
        <Route path="/" element={<Navigate to="/dashboard" replace />} ></Route>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/signup" element={<SignUp />}></Route>
        <Route element={<Layout />}>
            <Route path="/dashboard" element={<Dashboard />}></Route>
            <Route path="/insert" element={<Insert />}></Route>
            <Route path="/payments" element={<Payments />}></Route>
            <Route path="/transactions" element={<Transactions />}></Route>
            <Route path="/generate-invoice" element={<UserMerchantGenerateInvoice/>}></Route>
            <Route exact path="/user-upgrade" element={<UserUpgrade/>}></Route>
            <Route path="/user-merchant-pay" element={<UserMerchantPay />}></Route>

        </Route>
    </Routes>

Package.json

"version": "0.1.0",
  "private": false,
  "homepage": ".",

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
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" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="./logo192.png" />
    <link rel="manifest" href="./manifest.json" />
    <title>React App</title>
    <script defer="defer" src="./static/js/main.160e0e1d.js"></script>
    <link href="./static/css/main.0d9d8db6.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

Answer 1

编辑：如果不是 CORS 问题，也许您正在尝试访问//dashboard ？ 我没有在 React 路由器中找到Navigate组件，您使用的是什么库，如果那是您的组件，里面是什么？ 否则可能会尝试使用Redirect 。

您是否使用网络服务器来查看您的index.html页面？ 您可以使用服务。

npm i -D serve

在package.json

  "scripts": {
    "serve": "serve build -l 3001"
  },

npm run serve

打开 http://localhost:3001/ 。

检查您的控制台选项卡，您面临的问题是CORS 。

Answer 2

如果您正在使用 react-router 并尝试直接在浏览器中打开 index.html（或使用 electron，这实际上就是这样做的），除了像其他人建议的那样设置主页外，还可以使用 BrowserRouter 替换。

npm 运行 build React 后出现白屏

问题描述

2 个解决方案

解决方案1
0 2022-05-27 19:55:47

解决方案2
0 2022-09-02 12:21:03

npm 运行 build React 后出现白屏

问题描述

2 个解决方案

解决方案1 0 2022-05-27 19:55:47

解决方案2 0 2022-09-02 12:21:03

解决方案1
0 2022-05-27 19:55:47

解决方案2
0 2022-09-02 12:21:03