web-dev-qa-db-fra.com

Les chemins d'accès du client GatsbyJs vont uniquement à la page 404 lorsque l'url est directement accessible dans le navigateur en "production"

J'ai créé une application Gatsby et configuré gatsby-node.js à un client de création de chemins uniquement, qui fonctionnent tous correctement en développement tout en accédant directement à l'url du chemin mais pas en production.

exemple :

if(page.path.match(/^\/sample/)){
     page.matchPath = "/sample/:value1/:value2/:value3";
     createPage(page)
  }

J'utilise heroku pour déployer l'application

gatsby
11
NavaneethaKrishnan Palanisamy

Le pourquoi

Bien que le routeur côté client connaisse ce chemin, il n'y a pas de fichier HTML correspondant. Lorsque le navigateur regarde le site, il charge d'abord le 404.html fichier généré par gatsby, qui inclut le routeur côté client. Une fois que le routeur a terminé son initialisation, il lit le chemin et charge la page correcte. Cela signifie que vous vous retrouvez au bon endroit mais qu'il y a une demi-seconde d'atterrissage sur la mauvaise page.

Comment y remédier

La solution générale consiste à dire à votre serveur de rediriger le /sample/ chemin d'accès à votre /sample/index.htmlfichier. La façon de procéder dépend de votre hôte, mais je fournirai le nom de la technique pour différents hôtes au cas où vous voudriez la rechercher. Il est généralement appelé réécriture d'URL et devrait être pris en charge par toutes les principales plates-formes d'hébergement.

Heroku

La section Heroku de la documentation de déploiement de gatsby suggère d'utiliser le module heroku-buildpack-static qui a un support intégré pour les "routes personnalisées" qui résoudra cela pour votre cas en utilisant syntaxe comme celle-ci:

{
  "routes": {
    "/sample/**": "sample/index.html",
  }
}

AWS Amplify

Vous devez ajouter la redirection dans la console AWS Amplify. Pour cet exemple, les paramètres sont:

  • URI source: /sample/<*>
  • URI cible: /sample/index.html
  • Type: 200
14
Jamund Ferguson

J'ai regardé dans le dossier public pour trouver le fichier d'index pour la route client que j'ai créée

pour netlify, j'ai ajouté ce qui suit au fichier netlify.toml à la racine.


[[redirects]]
  from = "/user/dashboard/"
  to = "/user/index.html"
  status = 200
0
Stefan T