Solusi Page Not Found Reacjs di Hosting

Kesulitan yang umum ditemui dalam membuat aplikasi web dengan ReactJS adalah masalah kesalahan Page Not Found setelah aplikasi ditempatkan ke sebuah host. Hal ini biasanya terjadi karena implementasi perutean ReactJS di sisi klien, yang sering kali berbenturan dengan cara penanganan perutean oleh server hosting. Berikut beberapa solusi untuk mengatasi situasi “Halaman Tidak Ditemukan” di hosting saat bekerja dengan ReactJS:

Menggunakan ‘HasRouter’

Jika Anda menggunakan BrowserRouter dari react-router-dom, perbaikan cepatnya adalah beralih ke HashRouter. Dengan menambahkan hash (#) ke URL, HashRouter memfasilitasi pengenalan server dan selanjutnya mengabaikan informasi rute setelah hash. Berikut panduan penerapannya:

import { HashRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

Konfigurasi .htaccess

Jika Anda menggunakan server Apache, Anda bisa menambahkan file .htaccess di direktori root aplikasi React Anda untuk mengatur ulang semua permintaan ke index.html. Tambahkan kode berikut ke file .htaccess:

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

Kode di atas menginstruksikan server untuk mengarahkan semua permintaan yang tidak cocok dengan file atau direktori yang ada ke index.html.

Menambahkan Konfigurasi di web.config (untuk IIS)

Untuk pengguna Internet Information Services (IIS), Anda perlu membuat atau mengedit file web.config di direktori root aplikasi Anda dengan konten berikut:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Konfigurasi di atas akan memastikan bahwa semua rute akan diarahakan ke index.html, kecuali jika rute tersebut sesuai dengan file atau direktori yang ada.

Menyesuaikan Konfigurasi NGINX

Jika Anda menggunakan NGINX sebagai server web, Anda perlu menambahkan konfigurasi berikut di file konfigurasi NGINX Anda:

server {
  listen 80;
  server_name your_domain.com;
  location / {
    root /path/to/your/build;
    try_files $uri /index.html;
  }
  location /static/ {
    root /path/to/your/build;
  }
}

Konfigurasi ini menginstruksikan NGINX untuk mencoba melayani file yang diminta. Jika file tidak ditemukan, maka NGINX akan mengarahkan permintaan ke index.html.

Cara mengatasi masalah “Page Not Found” pada aplikasi ReactJS yang di-deploy ke hosting bisa berbeda-beda berdasarkan web servernya. Ini termasuk HashRouter untuk Apache, menyesuaikan .htaccess untuk IIS atau mengonfigurasi web.config untuk NGINX— semuanya merupakan solusi efektif. Selain itu, menggunakan paket server untuk penerapan lokal akan membantu menjamin perutean aplikasi Anda berfungsi dengan lancar. Dengan menerapkan langkah-langkah ini, Anda dapat menjamin bahwa aplikasi ReactJS Anda tersedia dengan baik dan tanpa hambatan apa pun seperti masalah “Halaman Tidak Ditemukan”.