Не удается отобразить страницу Svelte

Я новичок в Svelte. Я не могу сделать так, чтобы моя страница входа отображалась как часть одностраничного приложения.

Я скопировал и адаптировал пример на Привет мир

Но когда я нажимаю на ссылку, я не вижу страницу HTML из моего компонента входа в систему. Ссылка с главной (индексной?) Страницы:

http://localhost:5000/#/Login/

Код в моем файле App.svelte:

<script>
    import Login from './Login.svelte';

    const routes = {
      '/Login/': Login
    }
</script>

<body>
  <a href = "#/Login/">Login Please!</a>
</body>

Код в моем сценарии входа (в корневом каталоге проекта):

<script>
  let user;
  const unUser = User.subscribe(v => user = v);
  onDestroy(unUser);
  $: isLoggedIn = !!user;
</script>

<TopNavBar/>
{#if isLoggedIn}
  <p>Already Logged In</p>
{:else}
  let email, password;
  email = '';
  password = '';

  <h1 class = "dscript">Login to Foobar</h1>
  <form>
    ...

Вы используете svelte-spa-router?

Shriji Kondan 06.04.2021 08:15

Хм, нет. Думаю, вы это предлагаете. Интересно, зачем бывают разные роутеры и т.д. Что не так со встроенным?

gornvix 06.04.2021 11:49

Сам по себе Svelte не поставляется с маршрутизатором, в примере, который вы использовали в REPL, используется svelte-spa-router. проверьте это REPL.

Shriji Kondan 06.04.2021 13:43

@ShrijiKondan Спасибо за информацию. Как это соотносится с Webpack?

gornvix 06.04.2021 17:04

webpack и rollup - это сборщики пакетов, они не маршрутизаторы, я лично предпочитаю rollup.

Shriji Kondan 06.04.2021 17:19
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
5
31
0

Другие вопросы по теме