Comment ajouter une page 404 personnalisée et une page d'erreur différente (pour les autres erreurs) dans SvelteKit ?

Zedd
  • En gros, comment ajouter d'abord une page 404 personnalisée ?
  • Et puis une autre page d'erreur générique qui affichera un message/une description de l'erreur dans SvelteKit ?
Zedd

Après avoir lu la documentation , j'ai trouvé une réponse et j'ai créé des étapes plus spécifiques ci-dessous pour réaliser ce que j'aime :

  1. Créez __error.sveltedans votre dossier d' itinéraires .
  2. Dans ce fichier, vous pouvez le faire comme indiqué dans la documentation :
<script context="module">
  export function load({ error, status }) {
      return {
          props: {
              title: `${status}: ${error.message}`
          }
      };
  }
</script>

<script>
  export let title;
</script>

<h1>{title}</h1>
  1. Nous n'avons pas encore fini ! Vous pouvez vérifier le code d'état, puis afficher différents composants d'écran. (Vous pouvez d'ailleurs configurer l' propsintérieur de la loadfonction) :
<script context="module">
  export function load({ error, status }) {
      return {
          props: {
              message: error.message,
              status // same as status: status
          }
      };
  }
</script>

<script>
  import ErrorScreen from '../components/screens/ErrorScreen.svelte'; // your own Error screen component
  import NotFoundScreen from '../components/screens/NotFoundScreen.svelte'; // your own 404 screen component

  export let message;
  export let status;
</script>

{#if status == 404} <!-- Used '==' instead of '===' to match string/number status code (just to be sure) -->
  <NotFoundScreen />
{:else}
  <ErrorScreen {message} />
{/if}
  1. Vous êtes prêt ! Vous pouvez le tester en changeant l' #if status == 404aimer #if status == 500pour voir si tout fonctionne. (N'oubliez pas de le changer en 404).

Articles connexes