解決React/React route部屬在GitHub Pages上遇到的問題

-
修訂了一版放在github上，步驟比較詳細 這裡
---
想把React APP部屬在GitHub Pages上若有使用到React route最常見的問題就是出現"空白"或是自訂的404頁面，但是當你打開瀏覽器偵錯工具又發現資源是正確載入的

這個問題的原因發生在React route本身，可能因為React route偵測到的路徑發生一些問題導致元件沒有渲染，這時候你需要進行一些設置

1. 在你的package.json加入"homepage": "https://你的帳號.github.io/儲藏庫/index所在資料夾"

2. 修改package.json腳本
"scripts": {
"start": "node scripts/start.js",
"build": "set PUBLIC_URL=https://你的帳號.github.io/儲藏庫/index所在資料夾&& node scripts/build.js",
"test": "node scripts/test.js"
},
view raw package.json hosted with ❤ by GitHub
-

※修改後的package.json參考
{
"name": "my-website",
"version": "0.1.0",
"private": true,
"homepage": "https://p208p2002.github.io/me/build",
"dependencies": {
...
},
"scripts": {
"start": "node scripts/start.js",
"build": "set PUBLIC_URL=https://p208p2002.github.io/me/build&& node scripts/build.js",
"test": "node scripts/test.js"
},
...
}
view raw package.json-for-gh-pages hosted with ❤ by GitHub
-

3. 將Router替換成HashRouter
本來可能是BrowserRouter，如果沒有進行替換會在reload後發生404，這是因為GitHub Pages無法設置404 redirect

※如果不換成HashRouter，須給BrowserRouter指定basename。basename='儲藏庫/index所在資料夾/'

留言

張貼留言

這個網誌中的熱門文章

[Arduino]電子秤平 重量感測條+HX711AD模組

-
圖片
※此重量感測條為3kg 接法: 重量感測條-->HX711-->ARDUINO 重量感測條   HX711       紅------------>E                黑------------>E                 白------------>A-                 綠------------>A+               HX711          ARDUINO GND-------->GND DT----------->3 SCK--------->2 VCC-------->5V Main code #include "HX711.h" HX711 HX711_CH0(2, 3, 750); //SCK,DT,GapValue //SCK引腳用於arduino和HX711模塊通訊的時序提供 //DT引腳用於從HX711讀取AD的數據 //GapValue用於校準輸出的重量值，如果數值偏大就加大該值，如果數據偏小就減小該值 int LED = 13; //ARDUINO LED燈，亮起時代表初始化完成可以負重 long Weight = 0; //定義一個變量用於存放承重的重量，單位為g void setup() { pinMode(LED, OUTPUT); //設定LED是輸出引腳 digitalWrite(LED, LOW); //LED熄滅 Serial.begin(9600); //設定串口輸出波特率 HX711_CH0.begin(); ...
閱讀完整內容

cpe練習筆記 UVa401 Palindromes

-
圖片
原文題目 題目大意 判斷下面三種型態的字串 regular palindrom 從左邊或是右邊讀起來都一樣 ex. ABCDEDCBA mirrored string 看起來是左右完全一樣 ex. 3AIAE ※ E的反向是3(參考下圖) mirrored palindrome 左右讀起來一樣，看起來也一樣 ex. ATOYOTA 反向參考圖 注意 數字0和英文字母O被視為相同，只有O有效 策略 1. 判斷字串奇偶 2. 用字串左半減去右半字串(ASCII) 3. 如果相等 regular palindrome 或 mirrored palindrome     如果不相等 not a palindrome 或 mirrored string 程式碼 #include <stdlib.h> #include <stdio.h> void check ( char datas[], int num); void check2 ( char datas[], int num); void check3 ( char datas[], int num); //字典集 char dic[ 37 ] = { 'A' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' , 'K' , 'L' , 'M' , 'N' , 'O' , 'P' , 'Q' , 'R' , 'S' , 'T' , 'U' , 'V' , 'W' , 'X' , 'Y' , 'Z' , '1' , '2' , '3' , '...
閱讀完整內容

[PHP,MySQL]圖片上傳和讀取 使用base64_encode & base64_decode

-
2017/08/10更新  classicBookShareUpLoad.php 刪除一些沆碼 2017/08/10更新 更新後第二段SQL與第三段SQL會對不上，請自行修改 此篇主要是做紀錄用然後稍作一些修改，主要參考自: http://www.webtech.tw/info.php?tid=24 http://forum.twbts.com/thread-3299-1-1.html http://stackoverflow.com/questions/16262098/displaying-a-base64-images-from-a-database-via-php 摘要: base64_encode主要是使上傳結果正確 $_FILES["file"]["type"]的紀錄是為了讓讀圖的時候能有正確的解碼方式(即資料庫除了存圖片的空間外還要另外設置一個欄位儲存file type) 資料庫設置: 圖片存放空間:mediumblob 圖片型態存放空間:varchar(50) 上傳頁面: < html > < body > < Form Action = "classicBookShareUpLoad.php" Method = "POST" Enctype = "multipart/form-data" > < Input Type = "File" Name = "upfile" >< br > < Input Type = "Submit" value = " 開始上傳 " > </ Form > </ body > </ html > classicBookShareUpLoad.php: <?php include ( "loginStaCheck.php" ); ?> <?php //開啟圖片檔 $file = fopen ( $_F...
閱讀完整內容