使用create-react-app构建后如何修复白屏？ [英] How to fix the white screen after build with create-react-app?

查看：81
本文介绍了使用create-react-app构建后如何修复白屏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用了 react-router-dom 并构建了我的react-app。当我将其部署在服务器上时，我得到一个空白页，并且控制台为空。



我的App.js是：

  import React，{组件} from'react'; 
从 react-router-dom导入{Route，Switch，BrowserRouter}； 
来自 ./components/Agenda/Agenda的进口议程；从 ./components/Planning/Planning导入
 Planning； 
类App扩展了组件{
 render（）{
 return（
< div> 
< BrowserRouter basename = /> 
< ; Switch> 
<路由精确路径= / component = {Agenda} /> 
< Route path = / planning component = {Planning} /> 
< ; / Switch> 
< / BrowserRouter> 
< / div> 
）; 
} 
} 
 
导出默认应用程序；

我的index.js是：

  import从'react'进行React; 
从 react-dom导入ReactDOM； 
从 ./App导入应用； 
 
 ReactDOM.render（
< App /> 
，document.getElementById（'root'））;

我的index.html：

 <！DOCTYPE html> 
< html lang = zh-CN> 
< head> 
< meta charset = utf-8 /> 
< link rel =快捷方式图标 href = favicon.ico> 
<元
 name = viewport 
 content = width = device-width，initial-scale = 1，rinkle-to-fit = no 
 /> 
<元名称=主题颜色 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完整性= sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5Kkonym crossorigin = >< / 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中，我有：

 首页：。

当我将主页更改为 https://dev.test.com/React 和
运行它时，我得到一个空白页，例如我部署的地址： https://dev.test.com/React/ 这不是公开的。当我运行 serve-s build 时，控制台上出现空白屏幕，我得到：





我生产的index.html是：

 <！doctype html> 
< html lang = zh-CN> 
< head> 
< meta charset = utf-8 /> 
< link rel =快捷方式图标 href = favicon.ico> 
< meta name = viewport content = width = device-width，initial-scale = 1，shrink-to-fit = no /> 
<元名称=主题颜色 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完整性= sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5Kkonym crossorigin = > 
< / 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 < 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 。如果在子目录中使用，反应路由器需要此。



从 反应路由器文档：


基本名称：所有位置的基本URL。如果您的应用是通过服务器上的子目录提供的，则需要将其设置为子目录。格式正确的基本名称应以斜杠开头，但不能以斜杠结尾。 package.json 中的c $ c>到生产目标的网址。 homepage =。 表示它将在服务器根目录中的每个域上运行（也是默认行为）。



从与部署有关的文档：


默认情况下，假设您的应用托管在服务器根目录下，Create React App会生成一个构建。
要覆盖此内容，请在package.json中指定主页，例如：

  homepage： http ：//mywebsite.com/relativepath，

这将使Create React App正确推断根路径可以在生成的HTML文件中使用。



I used react-router-dom and I build my react-app. When I deploy it on the server, I get a blank page and the console is empty.

My App.js is :

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;

My index.js is :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
        <App/>
, document.getElementById('root'));

My 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>

In my package.json, I have : 

"homepage": "."

And when I change my homepage to https://dev.test.com/Reactand when I run it, I get a blank page, such as the address, which I deployed is : https://dev.test.com/React/ It is not public. When I run serve-s build, I get a blank screen on the console, I get:

My index.html on production is :

<!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>

How can I fix it ?

解决方案

Try changing basename="/" on your BrowserRouter to basename="/React". react-router needs this if used in a sub-directory.

From the react-router docs:

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.

Also change homepage in package.json to the url of your production target. homepage="." means it will work on every domain where it is located in the server root (and is also the default behaviour).

From the 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.

这篇关于使用create-react-app构建后如何修复白屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆