使用部署在 Apache Tomcat 上的 Create-react-app 创建的 React 网站出现空白屏幕

Question

使用 create-react-app 创建了一个 React 应用程序。在本地系统上一切正常，但在 Apache tomcat 上部署时出现问题。以下是我遵循的部署步骤：

在 package.json.

"homepage"：“https://websiteName.com/react_web”

在项目的 public 文件夹中创建 .htaccess 文件并添加以下代码

选项 - 多视图重写引擎开启 RewriteCond %{REQUEST_FILENAME} !-f 重写规则 ^ index.html [QSA,L]
运行 "npm run build" 创建构建文件。
已将构建文件的内容复制到 Apache tomcat 中的 'react_web' 文件夹中。

浏览器控制台没有错误。

Index.html:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="//websiteName.com/react_web/manifest.json"><link rel="shortcut icon" href="//websiteName.com/react_web/favicon.ico"><title>React App</title><link href="//websiteName.com/react_web/static/css/main.d17afb7e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="//websiteName.com/react_web/static/js/main.b302e125.js"></script></body></html>

以下是浏览器控制台的几张图片。

我正在使用 BrowserRouter 进行路由。我必须在那里改变什么吗？

我还看到所有项目文件都在控制台中正确加载。

任何建议或方向都会有所帮助。

Answer 1

我发现了问题。缺少以下部分。

注意：如果您使用的是 react-router@^4，则可以在任何 <Router>.

上使用 basename 属性来获取 <Link>s 根目录

<BrowserRouter basename="/calendar"/>
<Link to="/today"/>
// renders <a href="/calendar/today">

参考：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

使用部署在 Apache Tomcat 上的 Create-react-app 创建的 React 网站出现空白屏幕

React website created using Create-react-app deployed on Apache Tomcat giving blank screen

tomcat

reactjs

react-router

react-redux

create-react-app