React 应用程序在部署后在 gh-pages 上显示空白屏幕 - SO 的现有建议已实施

问题描述 投票：0回答：1

我正在尝试使用react-router-dom部署我的react应用程序，以便使用github页面进行客户端重定向。

部署后，我得到一个空白页面 - 除了react-router-dom上下文之外的组件之外，没有任何组件加载到DOM中。

作为调试的一部分，我已经完成了已经讨论该问题的堆栈溢出讨论。

我遵循了-

中建议的更改

React Router 无法与 Github Pages 一起使用

但这并不能解决问题。

我根据其他堆栈溢出讨论和 react 应用程序部署中的建议进行了以下更改

  1. 用 createHashRouter 替换了 createbrowserRouter 。

  2. 提供我的 createHashRouter 的基本名称作为存储库名称。

  3. 检查了 package.json 的主页及其正确性（根据文档）。

  4. 将 package.json 中的 'private' 属性设置为 false。

在部署构建时进行上述更改后，构建的index.html显示以下内容：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/FrontEndQuizApp/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="/FrontEndQuizApp/logo192.png" />
    <link rel="manifest" href="/FrontEndQuizApp/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/FrontEndQuizApp/static/js/main.ea628bb2.js"></script>
    <link href="/FrontEndQuizApp/static/css/main.2f2eb39d.css" rel="stylesheet">
</head>

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

</html>

但是我的网站和浏览器启用了 javascript。

我的应用程序的代码片段如下：

Index.tsx - 路由实现的地方 - 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import QuestionComp from "./components/QuestionComp";
import {
  
  createHashRouter,
  FutureConfig,
  RouterProvider,
} from "react-router-dom";

import { store } from "./store";
import { Provider } from "react-redux";
import { ToggleProvider } from "./components/ThemeToggleContext";
import ThemeToggle from "./components/ThemeToggel";
import GlobalBackground from "./components/GlobalBackground";

const router = createHashRouter(
  [
    {
      path: "/*",
      element: <App />,
    },
    {
      path: "/Question",
      element: <QuestionComp />,
    },
  ],
  { basename: "/FrontEndQuizApp" }
);

// declare function RouterProvider(props: RouterProviderProps): React.ReactElement;

interface RouterProviderProps {
  fallbackElement?: React.ReactNode;
  router: any;
  future?: FutureConfig;
}

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <ToggleProvider>
      <GlobalBackground>
        <ThemeToggle></ThemeToggle>
        <Provider store={store}>
          <RouterProvider router={router} />
        </Provider>
      </GlobalBackground>
    </ToggleProvider>
  </React.StrictMode>
);

reportWebVitals();

Package.json - 已为项目设置主页 - 

{
  "name": "quizreactapp",
  "version": "0.1.0",
  "private": false,
  "homepage": "https://ayushi186.github.io/FrontEndQuizApp",
  "dependencies": {
    "@redux-devtools/extension": "^3.3.0",
    "@reduxjs/toolkit": "^2.2.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.101",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "i": "^0.3.7",
    "npm": "^10.8.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-js-switch": "^1.1.6",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.24.1",
    "react-scripts": "5.0.1",
    "react-switch": "^7.1.0",
    "redux-devtools-extension": "^2.13.9",
    "sass": "^1.80.3",
    "styled-components": "^6.1.11",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^6.2.0"
  }
}

部署到 gh-pages 后应用程序的输出 -

部署到 gh-pages 后我的应用程序输出

非常感谢任何形式的帮助和指示。

javascript reactjs typescript react-router-dom github-pages
1个回答
0
投票

问题

您错误地将 

basename
属性添加到路由器配置中。 如果您手动导航到 
"/FrontEndQuizApp"
，例如
"https://ayushi186.github.io/FrontEndQuizApp/#/FrontEndQuizApp"
然后你将正确地看到你的应用程序内容渲染到 DOM 中。

app page

解决方案

basename
属性主要用于当您从服务器上的某个子目录托管/服务 React 应用程序时，但 
HashRouter
消除了这个问题，因为它使用 URL 哈希进行路由和导航。换句话说，应用程序从哪个目录提供并不重要。当您使用 
basename
指定 
HashRouter
属性时，问题在于它仍然会执行与不使用哈希路由相同的操作，例如它通知路由器、路由、链接等所有工作和功能relative到特定的基本名称，因此不是从
"#/"
相对工作，而是从
"#/FrontEndQuizApp"
相对工作。

要解决此差异，请从路由器配置中删除 

basename
：

const router = createHashRouter(
  [
    {
      path: "/*",
      element: <App />,
    },
    {
      path: "/Question",
      element: <QuestionComp />,
    },
  ],
);

这允许应用程序路由/链接/等从

"https://ayushi186.github.io/FrontEndQuizApp/#/"
开始工作和操作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.