使用 create-react-app 构建后如何修复白屏?
How to fix the white screen after build with create-react-app?
我使用了 react-router-dom
并构建了我的反应应用程序。当我在服务器上部署它时,我得到一个空白页面并且控制台是空的。
我的 App.js 是:
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component={Agenda} />
<Route path="/planning" component={Planning} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
我的 index.js 是:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
我的 index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
</body>
</html>
在我的 package.json 中,我有:
"homepage": "."
当我将 homepage
更改为 https://dev.test.com/React
并且
当我运行它时,我得到一个空白页面,例如我部署的地址是:https://dev.test.com/React/
它不是public。当我 运行 serve-s build
时,控制台出现空白屏幕,我得到:
我的 index.html 生产是:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<title>Test</title>
<link href="/React/static/css/2.2aa93811.chunk.css" rel="stylesheet">
<link href="/React/static/css/main.ca6e1d23.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script>!function(f){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),i()}function i(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},c={1:0},p=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return f[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=f,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/ReactCalendar/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>
<script src="/React/static/js/2.4a7f0704.chunk.js"></script>
<script src="/React/static/js/main.f9268394.chunk.js"></script>
</body>
</html>
我该如何解决?
尝试将 BrowserRouter
上的 basename="/"
更改为 basename="/React"
。如果在 sub-directory.
中使用,react-router
需要这个
basename: The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
同时将 package.json
中的 homepage
更改为生产目标的 url。 homepage="."
意味着它将在服务器根目录中的每个域上工作(这也是默认行为)。
来自React docs regarding deployment:
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.
我运行遇到同样的问题并解决了!
如果还有人遇到此问题,请按照以下步骤操作。
1 - 您需要更新浏览器。参考这个,https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers
2- 您需要使用 npm i react-router-dom
将 "react-router-dom":
依赖项添加到您的 package.json 文件
3- 添加 "homepage": ".",
到您的 package.json 文件
希望这对您有所帮助。
我也遇到了这个问题,白屏,没有报错。 None 这些答案解决了我的问题。
我要把我的问题的解决方案留在这里,这样像我这样的人就不会花 2 个小时在一个小错误上。
请确保将 /build
文件夹中的所有文件上传到服务器。
我遇到了这个问题。我试图在使用 double-clicking 和 index.html 构建后打开应用程序,但也没有用,我得到了空白页面,但如果构建的文件是 运行 在服务器环境中工作。 https://create-react-app.dev/docs/deployment/
像这样重新排列对我有用,删除确切吗?从根路径
<Router>
<Route exact path="/about" component={About} />
<Route path="/" component={App} />
</Router>
我只是在我的 index.html 上添加了 basename='/index.html'
,更多信息请参见下面的代码:
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import LoginPage from './components/LoginPage/LoginPage';
import Dashboard from './components/Dashboard/Dashboard';
function App() {
return (
<Router basename='/index.html'>
<Switch>
<Route path='/' exact component={LoginPage} />
<Route path='/dashboard' component={Dashboard}/>
</Switch>
</Router>
);
}
export default App;
希望对您有所帮助。
我有同样的“白屏”问题,我通过添加解决了:
<BrowserRouter basename="/">
basename="/"
在 index.js 文件中。
对我有用,希望对你有用。
None 以上答案对我有用。所以我尝试 运行 它在不同的端口并且它有效。
serve -s build -l 4000
这可能是因为您重命名了某个页面的路由。
我有一个没有显示任何错误的白屏,因为我正在使用 history.push
将用户转到我们已重命名的页面。
该页面已不存在,因此显示空白屏幕。
只是添加一个额外的答案,因为我知道造成这种情况的原因有很多。我在构建后遇到了一个白页,并在浏览器控制台中看到了 404 的 web 块。我在 package.json 中设置了 'homepage',并且感到困惑。
服务器端缓存
但是,我注意到在 404 消息中,被引用的块 与我的构建文件夹 中的散列不同;试图获取这些“旧”块,而不是文件名中具有不同哈希值的最新版本中的新块。
例如,我的浏览器控制台中的 404 错误指向一个带有类似哈希值的块:
main.f1d2d060.chunk.css // from an old build
^^^^^^^^^
在 /build
文件夹中,块实际上是:
main.adg25e108.chunk.css // from latest build
^^^^^^^^^
因此我意识到必须缓存一些文件来尝试检索旧文件而不是新文件。结果我启用了服务器端缓存,旧的网络块试图通过asset-manifest.json
的缓存版本检索...:sigh: .. .我能够刷新我的网络主机 (SiteGround) 的缓存。
刷新缓存会因您的主机而异:https://www.siteground.com/kb/clear-site-cache/
如果您已经尝试了所有其他方法,需要考虑的事项 -- 双重和三次检查控制台中 404 中的哈希字符串与您的 /build 文件夹中的哈希字符串是否匹配,否则您可能会遇到与旧资产相同的情况-manifest.json 试图检索错误的东西。
对我有用的是将 basename="/index.html"
添加到 BrowserRouter :
<BrowserRouter basename="/index.html">
...
</BrowserRouter>
react-router-dom v6 有这个问题,对我有用的是用 <HashRouter>
替换 <BrowserRouter>
并在 [=15= 中添加 "homepage": "."
]
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/index"
import SignInPage from "./pages/signin";
function App() {
return (
<Router>
<Home />
<Routes>
<Route path='/' component={Home} />
<Route path='/signin' component={SignInPage}/>
</Routes>
</Router>
);
}
export default App;
我已经尝试了以上所有方法并且 none 有效。我正在 BrowserRouter 中使用 Switch 的地方编写代码,但文档说使用 Routes 代替 Switch。
在第二个代码中,我把组件放回去,网站又回来了,但它仍然无法路由,不知道为什么。
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/index";
import SignInPage from "./pages/signin";
function App() {
return (
<Router>
<Routes>
<Route path='/' component={Home} />
<Route path='/signin' component={SignInPage}/>
</Routes>
</Router>
);
}
export default App;
我使用了 react-router-dom
并构建了我的反应应用程序。当我在服务器上部署它时,我得到一个空白页面并且控制台是空的。
我的 App.js 是:
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component={Agenda} />
<Route path="/planning" component={Planning} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
我的 index.js 是:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
我的 index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
</body>
</html>
在我的 package.json 中,我有:
"homepage": "."
当我将 homepage
更改为 https://dev.test.com/React
并且
当我运行它时,我得到一个空白页面,例如我部署的地址是:https://dev.test.com/React/
它不是public。当我 运行 serve-s build
时,控制台出现空白屏幕,我得到:
我的 index.html 生产是:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<title>Test</title>
<link href="/React/static/css/2.2aa93811.chunk.css" rel="stylesheet">
<link href="/React/static/css/main.ca6e1d23.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script>!function(f){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),i()}function i(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},c={1:0},p=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return f[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=f,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/ReactCalendar/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>
<script src="/React/static/js/2.4a7f0704.chunk.js"></script>
<script src="/React/static/js/main.f9268394.chunk.js"></script>
</body>
</html>
我该如何解决?
尝试将 BrowserRouter
上的 basename="/"
更改为 basename="/React"
。如果在 sub-directory.
react-router
需要这个
basename: The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
同时将 package.json
中的 homepage
更改为生产目标的 url。 homepage="."
意味着它将在服务器根目录中的每个域上工作(这也是默认行为)。
来自React docs regarding deployment:
By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.
我运行遇到同样的问题并解决了!
如果还有人遇到此问题,请按照以下步骤操作。
1 - 您需要更新浏览器。参考这个,https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers
2- 您需要使用 npm i react-router-dom
"react-router-dom":
依赖项添加到您的 package.json 文件
3- 添加 "homepage": ".",
到您的 package.json 文件
希望这对您有所帮助。
我也遇到了这个问题,白屏,没有报错。 None 这些答案解决了我的问题。 我要把我的问题的解决方案留在这里,这样像我这样的人就不会花 2 个小时在一个小错误上。
请确保将 /build
文件夹中的所有文件上传到服务器。
我遇到了这个问题。我试图在使用 double-clicking 和 index.html 构建后打开应用程序,但也没有用,我得到了空白页面,但如果构建的文件是 运行 在服务器环境中工作。 https://create-react-app.dev/docs/deployment/
像这样重新排列对我有用,删除确切吗?从根路径
<Router>
<Route exact path="/about" component={About} />
<Route path="/" component={App} />
</Router>
我只是在我的 index.html 上添加了 basename='/index.html'
,更多信息请参见下面的代码:
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import LoginPage from './components/LoginPage/LoginPage';
import Dashboard from './components/Dashboard/Dashboard';
function App() {
return (
<Router basename='/index.html'>
<Switch>
<Route path='/' exact component={LoginPage} />
<Route path='/dashboard' component={Dashboard}/>
</Switch>
</Router>
);
}
export default App;
希望对您有所帮助。
我有同样的“白屏”问题,我通过添加解决了:
<BrowserRouter basename="/">
basename="/"
在 index.js 文件中。
对我有用,希望对你有用。
None 以上答案对我有用。所以我尝试 运行 它在不同的端口并且它有效。
serve -s build -l 4000
这可能是因为您重命名了某个页面的路由。
我有一个没有显示任何错误的白屏,因为我正在使用 history.push
将用户转到我们已重命名的页面。
该页面已不存在,因此显示空白屏幕。
只是添加一个额外的答案,因为我知道造成这种情况的原因有很多。我在构建后遇到了一个白页,并在浏览器控制台中看到了 404 的 web 块。我在 package.json 中设置了 'homepage',并且感到困惑。
服务器端缓存
但是,我注意到在 404 消息中,被引用的块 与我的构建文件夹 中的散列不同;试图获取这些“旧”块,而不是文件名中具有不同哈希值的最新版本中的新块。
例如,我的浏览器控制台中的 404 错误指向一个带有类似哈希值的块:
main.f1d2d060.chunk.css // from an old build
^^^^^^^^^
在 /build
文件夹中,块实际上是:
main.adg25e108.chunk.css // from latest build
^^^^^^^^^
因此我意识到必须缓存一些文件来尝试检索旧文件而不是新文件。结果我启用了服务器端缓存,旧的网络块试图通过asset-manifest.json
的缓存版本检索...:sigh: .. .我能够刷新我的网络主机 (SiteGround) 的缓存。
刷新缓存会因您的主机而异:https://www.siteground.com/kb/clear-site-cache/
如果您已经尝试了所有其他方法,需要考虑的事项 -- 双重和三次检查控制台中 404 中的哈希字符串与您的 /build 文件夹中的哈希字符串是否匹配,否则您可能会遇到与旧资产相同的情况-manifest.json 试图检索错误的东西。
对我有用的是将 basename="/index.html"
添加到 BrowserRouter :
<BrowserRouter basename="/index.html">
...
</BrowserRouter>
react-router-dom v6 有这个问题,对我有用的是用 <HashRouter>
替换 <BrowserRouter>
并在 [=15= 中添加 "homepage": "."
]
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/index"
import SignInPage from "./pages/signin";
function App() {
return (
<Router>
<Home />
<Routes>
<Route path='/' component={Home} />
<Route path='/signin' component={SignInPage}/>
</Routes>
</Router>
);
}
export default App;
我已经尝试了以上所有方法并且 none 有效。我正在 BrowserRouter 中使用 Switch 的地方编写代码,但文档说使用 Routes 代替 Switch。 在第二个代码中,我把组件放回去,网站又回来了,但它仍然无法路由,不知道为什么。
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/index";
import SignInPage from "./pages/signin";
function App() {
return (
<Router>
<Routes>
<Route path='/' component={Home} />
<Route path='/signin' component={SignInPage}/>
</Routes>
</Router>
);
}
export default App;