Enroutament i React

Tenir l’aplicació ben enroutada no significa què després el enllaç amigable sigui funcional al 100%: si no es dins del context de la aplicació React. Per a aquesta raó s’haurà de dir al servidor HTTP que redireccioni qualsevol petició diferent a la ruta de index a la mateixa què el propi index que executa la aplicació.

En alguns casos com pot ser ASP MVC amb l’extensió de SPA, el propi host IIS o autohost de NET Core es configura per redireccionar aquestes peticions. En NodeJS passa exactament el mateix al desplegar-lo com una aplicació React Client.

En altres entorns no es ben bé així, com pot ser Apache o Azure Static Web Apps.

Apache:

Caldrà crear un fitxer .htaccess pròpi a la carpeta on es situï el build i dins caldrà especificar les següents línies

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

Azure Static Web Apps:

Caldrà crear un fitxer amb el nom staticwebapp.config.json i afegir les següents línies de configuració:

{
    "navigationFallback": {
        "rewrite": "index.html",
        "exclude": ["/static/*"]
    },
    "mimeTypes": {
        ".json": "text/json"
    }
}

Per a més informació: