我正试图使用react Router DOM部署我的反应应用程序,以便使用Github页面进行客户端重定向。
部署后,我得到一个空页面——除了路由上下文之外的内容,DOM中没有加载任何组件内容。
作为调试的一部分,我已经完成了Stack Overflow讨论,讨论了这个问题。
我遵循了中建议的更改
React Router not working with Github Pages
但这并没有解决问题。
我根据其他堆栈溢出讨论的建议和网站上的建议进行了以下更改
react app Deployment
:
-
已更换
createBrowserRouter
具有
createHashRouter
-
提供
basename
我的
createHashRouter
作为回购名称。
-
根据文档检查package.json的主页及其正确性。
-
将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页面后应用程序的输出-
my app output after deployment to gh-pages
