Recommended router

Curious what others are using or are planning to use with svelte.

I was just about to ask the same question. There seem to be multiple options if you are writing in pure Svelte ( https://youtu.be/GAwvVGLwtVQ ) but I haven’t seen any examples of using Meteor routing with Svelte, and that’s what interests me right now.

1 Like

Someone also mentioned Tinro which I’ll likely play around with

2 Likes

Tinro isn’t the most popular, but it’s my favorite. There may be an official one in the future tho.

2 Likes

svelte-pathfinder is a great router that integrates with the browser history API and fits nicely in the Svelte paradigm:

A completely different approach of routing. State-based router suggests that routing is just another global state and History API changes are just an optional side-effects of this state.

1 Like

Thus far we have just been using the svelte-routing package to pretty great success thus far. :slight_smile:

Though it seems like Tinro may be more robust. We didn’t discover Tinro until after we implemented svelte-routing and didn’t see enough difference to justify the change. Both seem like they can tackle nearly any use case.

2 Likes

Interesting!

How did you manage guards with this package and how did you split your routes between components?

1 Like

Good questions! Keeping in mind that my exposure to routers has been limited to FlowRouter and NEXTJS before this one. Generally we keep most everything in my App.svelte file. Here is generally how I managed guarding logged in vs not, user permissions and passing params/props to the route:

<script>
  import { Meteor } from 'meteor/meteor';
  import { Tracker } from 'meteor/tracker';
  import { Router, Route, navigate } from 'svelte-routing'

 //typical .svelte component imports

  let loggedIn = false;
  let userPermission = "";
  export let url = "";

  Tracker.autorun(() => {
    loggedIn = !!Meteor.user();

    let user = Meteor.user();
    if(user){
      userPermission = user.profile.accountType;
    }
  });
</script>
<Router url="{url}">
  {#if !loggedIn}
    <main>
      <Route path="/" component={Home} />
      <Route path="/password-recovery" component={ForgotPassword} />
      <Route path="/reset-password" component={ResetPassword} />
    </main>
  {/if}
  {#if loggedIn}
    {#if userPermission === 'administrator'}
      <AppAdminHeader />
      <main>
        <Route path="/secure/dashboard">
          <AdminDashboard userPermission={userPermission}/>
        </Route>

        <Route path="/secure/inspection-home">
          <AdminInspectionTemplateLander userPermission={userPermission} />
        </Route>

        <Route path="/secure/equipment-home">
          <AdminEquipmentLander userPermission={userPermission} />
        </Route>

        <Route path="/secure/client-home">
          <AdminClientsFacilitiesLander userPermission={userPermission} />
        </Route>

        <Route path="/secure/users-home">
          <AdminUsersLander userPermission={userPermission} />
        </Route>
      </main>
    {/if}
    {#if userPermission === 'administrator' || userPermission === 'manager'}
      <main>
        <!--Just to give an idea on how we are passing params-->
        <Route path="/secure/single-user/:id" let:params>
          <SingleUserDetails userPermission={userPermission} userId="{params.id}" />
        </Route>
      </main>
    {/if}
  {/if}
</Router>

Obviously you could get into quite a bit more complexity here, but this is what has been working pretty well for us thus far! :slight_smile:

2 Likes

Thanks for your reply!

Your solution seems works pretty well.
My last doubt is if I can split routes between the other components.

I saw that with Tinro’s library, you can.

1 Like

Their Docs don’t seem to mention it directly, but all told I would think that if you need that functionality it might make sense to use Tinro :slight_smile: Good luck!

Okay! Thank you very much :wink:

1 Like

I have another question…

How can I pass the current path to a sibling component?
My situation is the following:

<Navbar />
<main>
  <Route path="/">
    <ShoppingList />
  </Route>
  <Route path="/list/:id" let:params>
    <EditList listId={params.id} />
  </Route>
  <Route>
    <NotFound />
  </Route>
</main>

NavBar component needs to know the current path to change Its behavior.

Any suggestion?

Fyi for those who want to use Tinro, you’ll need to import it like this:

import { Route } from 'tinro/cmp/index.js';

See: https://github.com/AlexxNB/tinro/issues/14#issuecomment-631071088