Svelte routing when logging in

1

Hi folks, still playing around with using Svelte as the view layer on a test Meteor app, enjoying it very much. I’m just testing a basic login workflow which seems to work in terms of detecting when a user logs in but doesn’t seem to update the routes that is shown when that login takes place. Below is my svelte App code in case any one using Svelte can give me any tips? Thanks!

<script>
  import { Tracker } from 'meteor/tracker'
  import { onDestroy } from 'svelte'
  import { Router, Route, navigate } from 'svelte-routing'
  import Login from '/client/views/Login.svelte'
  import Nav from '/client/views/Nav.svelte'
  import Loading from '/client/views/Loading.svelte'
  import Home from '/client/views/Home.svelte'
  import Clients from '/client/views/Clients.svelte'
  import ClientNew from '/client/views/ClientNew.svelte'
  import Client from '/client/views/Client.svelte'

  let loggedIn = false

  const computation = Tracker.autorun(() => {
    loggedIn = !!Meteor.user()
  })

  onDestroy(() => computation.stop())

</script>

<Router url="">
  <div class="container">
    {#if loggedIn}
      <Nav />
      <Route path="/" component={Home} />
      <Route path="/loading" component={Loading} />
      <Route path="/clients" component={Clients} />
      <Route path="/clients/new" component={ClientNew} />
      <Route path="/clients/:id" let:params><Client id={params.id} /></Route>
    {:else}
      <Login />
    {/if}
  </div>
</Router>
2 Likes
2

Did you manage to get this one working Andre?

I’m new to Meteor and looking at ways to implement routes with Svelte.

Bests
Sean

3

I’ve been using Tintro for routes and really enjoying it.

I haven’t tried wrapping routes themselves in conditionals, but have been wrapping the interior of the route.

  <Route path="/moves">
    <div transition:fade>
      {#if $userId}
        <MoveForm userId={$userId} />
        <AllMoves />
      {/if}
    </div>
  </Route>

I’m not sure if this is the right way, but it works.

2 Likes
4

Hi there, sorry about late reply, I’m afraid I’m mostly using React at the moment but perhaps try Scott’s suggested lib below

5

@stolinski I’m curious of what the advantage of this router is over:
https://github.com/EmilTholin/svelte-routing

Is it just passing props?

6

I’m glad you asked. Mostly just API. Tinro uses <a href> instead of a Link component which I like. Also you just declare a route anywhere instead of having to wrap things in <Router>

1 Like