Как добавить пользовательскую страницу 404 и другую страницу ошибок (для других ошибок) в SvelteKit?

#svelte #sveltekit

Вопрос:

В принципе, как сделать ff. в SvelteKit:

  • Сначала добавьте пользовательскую страницу 404.
  • Есть другая страница общей ошибки, на которой будет отображаться сообщение/описание об ошибке в SvelteKit

Ответ №1:

Прочитав документы, я нашел ответ и создал более конкретные шаги ниже, чтобы достичь того, что мне нравится:

  1. Создайте __error.svelte в папке «Маршруты«.
  2. Внутри этого файла вы можете сделать это, как показано в документах:
 <script context="module">
  export function load({ error, status }) {
      return {
          props: {
              title: `${status}: ${error.message}`
          }
      };
  }
</script>

<script>
  export let title;
</script>

<h1>{title}</h1>
 
  1. Мы еще не закончили! Вы можете проверить код состояния, а затем отобразить различные компоненты экрана. (Кстати, вы можете настроить props внутреннюю load функцию):
 <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. У вас все готово! Вы можете проверить это, изменив значение #if status == 404 на нравится #if status == 500 , чтобы убедиться, что все работает. (Не забудьте изменить его обратно на 404 ).