英文:
React projects works fine in local host, but is blank in gh-pages
问题
我正在处理一个React项目，它之前能够工作，但无法从正确的页面启动。为了解决这个问题，我决定将一个React组件重命名为与项目的GitHub仓库同名。这个组件之前叫做Notebook（现在叫做Note）。最初，gh-pages会从Notebook（现在叫Note）组件启动，而不是登录组件。然而，在从Notebook更名为Note之后，gh-pages现在从一个空白页面启动（什么都不加载），而当我在我的电脑上启动应用程序时，它却表现得非常出色。我已经在网上阅读了很多关于更改package.json文件的评论，但都没有成功。希望能够提供一些帮助！另外，请随时与我联系如果有任何问题。
package.json
{"name": "notebook","version": "0.1.0","private": true,"homepage": "https://thewizard91.github.io/notebook/","dependencies": {"@googlemaps/react-wrapper": "^1.1.18","@reduxjs/toolkit": "^1.7.1","@testing-library/jest-dom": "^5.16.1","@testing-library/react": "^12.1.2","@testing-library/user-event": "^13.5.0","babel-preset-react": "^6.24.1","bootstrap": "^5.2.1","firebase": "^9.9.4","gulp": "^3.9.1","react": "^17.0.2","react-bootstrap": "^2.5.0","react-dom": "^17.0.2","react-redux": "^7.2.6","react-router-dom": "^6.2.1","react-scripts": "^2.1.8","redux": "^4.1.2","redux-thunk": "^2.4.1","semantic-ui-css": "^2.4.1","semantic-ui-react": "^2.0.4","serve": "^14.2.0","styled-components": "^5.3.3","web-vitals": "^2.1.2"},"scripts": {"predeploy": "npm run build","deploy": "gh-pages -d build -b gh-pages","start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","heroku-postbuild": "npm run build"},"heroku-run-build-script": true,"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": "^3.2.3"},"engines": {"node": "16.18.1","npm": "8.19.2"}}
英文:
I am working on a react project that worked but would not start from the right page. To fix that, I decided to rename a react component with the same name as the gh repo of the project. That was the Notebook(now Note). Initially, gh-pages would start from the Notebook(now Note) component, not the Login component. However, after the name change from NOtebook to Note, now gh-pages starts at a blank page (it loads nothing), while it works wonders on my computer when I launch the app. I have read a lot of comments online about changes in the package.json file and did them, but unsuccessfully; any help would be appreciated! Also, please feel free to reach out to me with any questions.
package.json
{"name": "notebook","version": "0.1.0","private": true,"homepage" : "https://thewizard91.github.io/notebook/","dependencies": {"@googlemaps/react-wrapper": "^1.1.18","@reduxjs/toolkit": "^1.7.1","@testing-library/jest-dom": "^5.16.1","@testing-library/react": "^12.1.2","@testing-library/user-event": "^13.5.0","babel-preset-react": "^6.24.1","bootstrap": "^5.2.1","firebase": "^9.9.4","gulp": "^3.9.1","react": "^17.0.2","react-bootstrap": "^2.5.0","react-dom": "^17.0.2","react-redux": "^7.2.6","react-router-dom": "^6.2.1","react-scripts": "^2.1.8","redux": "^4.1.2","redux-thunk": "^2.4.1","semantic-ui-css": "^2.4.1","semantic-ui-react": "^2.0.4","serve": "^14.2.0","styled-components": "^5.3.3","web-vitals": "^2.1.2"},"scripts": {"predeploy": "npm run build","deploy": "gh-pages -d build -b gh-pages","start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","heroku-postbuild": "npm run build"},"heroku-run-build-script": true,"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": "^3.2.3"},"engines": {"node": "16.18.1","npm": "8.19.2"}}
答案1
得分: 0
当访问您的网页时，我看到许多网络请求返回404，特别是babel和firebase资源。
您可以检查一下这些资源是否已提交到gh-pages分支。
英文:
When visiting your web page, I see a lot of network requests return 404, particularly for babel and firebase resources.
Could you check that those resources were committed to the gh-pages branch.
答案2
得分: 0
我找到了一个便宜的解决方法。我注意到当我将项目部署到 gh-pages 时，应用的主体未加载。这意味着在启动应用程序时未加载<Routes></Routes>中的所有组件（仅在本地主机上有效）。因此，我在<Routes></Routes>段的顶部添加了一个导航栏，而在<Navigation />内，我有指向主页（登录页面）的链接（我打算使用该组件启动应用程序；因此，单击链接后我得到我想要的效果。以下是代码。请随时评论以获得进一步的澄清，也许我可以更清晰：)！
class App extends Component {render() {return (<Containerid="AppId"className="d-flex align-items-center justify-content-center"><div className="w-100"> {/*className = "w-100"*/}<Router><Navigation/><AuthProvider><Routes><Route exact path="/dashboard" element={<Dashboard />}/>{/* <Route exact path='/' element={<PrivateRoute/>} ><Route exact={true} path='/login' element={<LogIn/>}/></Route> */}<Route path='/update-profile' element={<UpdateProfile/>}/><Route path="/signup" element={<SignUp/>}/><Route path="/login" exact={true} element={<LogIn/>}/><Route path="/forgot-password" element={<ForgotPassword/>}/><Route path="/note" element={<Note/>}/><Route path="/mainpage" element={<MainPage/>}/><Route path="/new" element={<New/>}/></Routes></AuthProvider></Router></div></Container>);}}export default App;
英文:
I found a cheap fix. I noticed that when I deploy the project on gh-pages, the app's body is not loaded. Meaning all the components within the <Routes></Routes> were not loaded when you launched the app (only in the local host it works). So what I did was add a navbar on top of the <Routes></Routes> segment, and inside of the <Navigation />, I have the link to the homepage (login page) (the component that I intended to start the app with; so upon the click to the link I get what I want. Here is the code. Please feel free to comment for further clarification, maybe I can be clearer:)!
class App extends Component {render() {return (<Containerid = "AppId"className = "d-flex align-items-center justify-content-center"><div className = "w-100"> {/*className = "w-100"*/}<Router><Navigation/><AuthProvider><Routes><Route exact path="/dashboard" element={<Dashboard />}/>{/* <Route exact path='/' element={<PrivateRoute/>} ><Route exact={true} path='/login' element={<LogIn/>}/></Route> */}<Route path='/update-profile' element={<UpdateProfile/>}/><Route path="/signup" element={<SignUp/>}/><Route path="/login" exact={true} element={<LogIn/>}/><Route path="/forgot-password" element={<ForgotPassword/>}/><Route path="/note" element={<Note/>}/><Route path = "/mainpage" element={<MainPage/>}/><Route path = "/new" element={<New/>}/></Routes></AuthProvider></Router></div></Container>);}}export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论