خطای 404 با رفرش صفحات React js

سلام

آموزش های فیلم ری اکت رو دیدم و مطابق آن پیش رفتم و یک وب سایت تست با ری اکت بالا اوردم

ولی وقتی تو قسمت تماس با ما هستیم آدرس url رو کپی می کنم و تو یک تب جدید تو یک مرورگر میزنم اررور 404 میده ولی وقتی ار صفحه اصلی میریم همه چی اوکیه و لود میشه وب سایت

ممنون میشم راهنمایی کنید

سلام

اگر این وب سایت را در سمت سرور یا هاست پیاده سازی کرده اید به این مشکل برخورد می کنید، زیرا مسیردهی یا routing شما در سمت فرانتد اتفاق می افتد. در حالیکه این کار باید در سرور انجام شود. فرض کنید وب سایت شما به آدرس http://a.com است و کاربر از این صفحه به صفحه http://a.com/b می رود. در این شرایط مرورگر به صورت خودکار مسیردهی‌ها را مدیریت می کند و اتفاقی در سمت سرور نمی افتد (اینجا مشکلی وجود ندارد). مشکل اصلی زمانی پیدا می شود که کاربر روی لینک کلیک کرده و آدرس را در صفحه جدید (New Tab) مرورگر باز می کند. در این حالت چون وب سرور شما پردازش را انجام نمی دهد با خطای ۴۰۴ رو به رو می شوید.

اما راه حل این مشکل چیست؟

برای اینکه این خطا را از بین ببرید باید ابتدا یک وب سرور مانند Apache یا Nginx یا Litespeed در سرور خود نصب کنید(یا به پشتیبان سرور بگویید مثلا Nginx را برای شما نصب کند). سپس به فایل کانفیگ یا تنظیمات وب سرور رفته و مسیردهی اسکریپت خود را در آن انجام دهید.

در nginx باید به مسیر sites-enabled رفته و فایل nginx.conf را باز کنید. سپس خط زیر را به ادامه فایل کانفیگ اضافه کنید:

location / {
 try_files $uri /index.html;
}

در وب سرور آپاچی (Apache) این تنظیمات در .htaccess اتفاق می افتد و نمونه آن به صورت زیر است (به جای yourdomain، نام وب سایت خود را وارد کنید):

# Fallback all other routes to index.html
RewriteRule ^ /index.html [L]
RewriteCond %{HTTP_HOST} ^yourdomain\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$
RewriteRule ^/?$ "http\:\/\/yourdomain\.com" [R=301,L]

این خطوط به وب سرور Nginx می گوید که هر چه در uri$ جایگزین شد یک URL مجزاست و آن را متناسب با اسکریپت پردازش کن. در غیر اینصورت فایل Index.html را نمایش بده!

امیدوارم مشکل‌تان حل شده باشد.