极客观点
项目管理
HarmonyOS
我使用 react-router-dom 并构建了我的 react-app。当我在服务器上部署它时，我得到一个空白页面，控制台是空的。
我的 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/ 它不公开。当我运行 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>
我该如何解决？
原文由 Ichrak Mansour 发布，翻译遵循 CC BY-SA 4.0 许可协议
尝试将您的 ---
basename="/"上的BrowserRouter更改为basename="/React"。react-router如果在子目录中使用需要这个。从
react-router文档：homepage中的package.json更改为您的生产目标的 url。homepage="."意味着它将适用于它位于服务器根目录中的每个域（也是默认行为）。从 关于部署的 React 文档：