KNL Mobile - Professional Computer & Mobile Repair Services

🔍 404 Error ဆိုတာဘာလဲ?

404 Error ဆိုတာက Browser က တောင်းတဲ့ URL ကို Server မှာ မတွေ့လို့ ပြန်ပေးတဲ့ Error တစ်ခုပဲဖြစ်ပါတယ်။ ဒါဟာ မကြာခဏ SPA (Single Page Application) တွေမှာ Route တစ်ခုကို refresh လုပ်တဲ့အချိန်မှာ ဖြစ်တတ်ပါတယ်။

🎯 ပြဿနာဖြစ်ပေါ်လာတဲ့အကြောင်းအရင်း

React, Vue, Angular တို့လို SPA တွေမှာ Pages တွေကို JavaScript နဲ့ client-side မှ handle လုပ်ပါတယ်။ ဒါကြောင့် /about တို့ /services တို့လို URL ကို သွားတဲ့အခါမှာ Browser ထဲမှာအဆင်ပြေပါတယ်။

ဒါပေမယ့် Refresh လုပ်တဲ့အခါမှာ Browser က Server ကို "ဒီ URL (/about) ကို file တစ်ခုပေးပါ" ဆိုပြီးတောင်းပါတယ်။ Apache Server မှာ /about ဆိုတဲ့ physical file မရှိတဲ့အခါမှာတော့ ➡️ 404 Error ပြပါတယ်။

🛠️ ဖြေရှင်းနည်း – Apache .htaccess ဖိုင် အသုံးပြုပြီး Redirect

Apache Server ကိုဖွင့်ပြပါတယ်—"တောင်းတဲ့ Route က file မရှိဘူးဆိုလည်း React ရဲ့ index.html ကိုပေးပေးနော်" ဆိုတာကို သတိပေးရပါတယ်။

ဖိုင်နာမည်: .htaccess

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
</IfModule>

📂 .htaccess ဖိုင်ကို ဘယ်လိုထည့်မလဲ?

Hosting Panel (ဥပမာ Hostinger) ထဲက File Manager ကို ဝင်ပါ။
public_html folder ထဲမှာ .htaccess ဆိုတဲ့ဖိုင် ရှိမရှိစစ်ပါ။
မရှိရင် + File နဲ့ .htaccess ဆိုပြီး အသစ်ဖန်တီးပါ။
အထက်က code ကို ထည့်ပြီး Save လုပ်လိုက်ပါ။

📌 မှတ်သားစရာ: .htaccess ဆိုတဲ့နာမည်ကို .abcd.htaccess လိုမထည့်ပါနဲ့။ Apache က .htaccess လို့နာမည်တိတိပဲသိတယ်။

✅ အဆင်ပြေအောင်စစ်ရန်

/about, /contact, /products တို့ကို သွားကြည့်ပြီး Refresh လုပ်ပါ။ မည်သည့် 404 error မပေါ်တော့ရင် Fix ဖြစ်သွားပါပြီ။

💡 နောက်ထပ် အကြံပြုချက်

Netlify, Vercel တို့ကိုသုံးနေတယ်ဆိုရင် rewrite rules ကို project config ထဲမှာထည့်ပေးဖို့လိုပါတယ်။
SEO ပိုင်းအတွက် canonical URLs နှင့် 404 fallback page လည်းထည့်ဖို့သတိထားပါ။

🔚 နိဂုံးချုပ်

SPA အမျိုးအစား Web App များမှာ Routing ကို client-side မှ JavaScript handle လုပ်တဲ့အတွက် Refresh လုပ်တဲ့အခါမှာ Server ထံ Route တောင်းတာကို ကိုင်တွယ်ပေးဖို့လိုပါတယ်။ Apache .htaccess သုံးပြီး Redirect Rule တစ်ခုတည်းနဲ့ ဒီပြဿနာကို ဖြေရှင်းနိုင်ပါတယ်။

KNL Tech Solutions

Web Developer & Tech Consultant

Single Page App (React, Vue) တွေမှာ Refresh လုပ်တော့ 404 Error တက်တာ ဘာကြောင့်လဲ? ဘယ်လိုဖြေရှင်းရမလဲ?