請大佬們幫忙解答，React相關問題

react reactjs 新手

hihi 2022-01-13 19:23:16 ‧ 1378 瀏覽

分享至

前輩們好

目前嘗試用React去寫網站

在本機端一切正常，但是丟上GITHUB的gh-pages時發現兩個問題

一、由gh-pages連進來時跳轉到的頁面網址最後面有 /project-name/
但實際正確首頁是 https://<我的github username>.github.io/

二、上去gh-pages時好像是因為build的關係，我的圖片跟影片路徑都跑掉了

以上兩個問題都有自己爬過文了，有找到過類似文章，但問題沒有被解決
請前輩們幫忙，附上APP.js的檔案，十二萬分感謝！！

前端野人 iT邦新手 3 級 ‧ 2022-01-13 19:27:37 檢舉

https://create-react-app.dev/docs/using-the-public-folder

前端野人 iT邦新手 3 級 ‧ 2022-01-13 19:29:52 檢舉

如果頁面路徑有問題找 react router dom 的basename

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

jason71708

iT邦新手 3 級 ‧ 2022-01-14 10:03:14

最佳解答

如果你是用 Create React App 的話：

在 package.json 新增 homepage 屬性，填上 Github Page 網址：

"homepage": "https://myusername.github.io",

安裝 gh-pages：

npm install --save gh-pages

在 package.json 新增 script：

  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -b master -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

跑指令部署到 Github Page。

npm run deploy

官方文章

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙