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. 
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! 
4 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 Good luck!
Okay! Thank you very much 
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
I’ve been practically pulling out my hair trying to get any Svelte routing to work with Meteor. I’ve tried the various import fixes, but I just can’t seem to get this to work (the issue is specifically when trying to redirect or when the app starts at anything but the home page). I get an error at createRouteObject() in Route.svelte.
1 Like
Which router are you working with? This one?: https://github.com/EmilTholin/svelte-routing
Would you mind sharing a bit of example code?
Somehow I just resolved the issue by wrapping the entire page in vanilla <Route> tags. I am at a complete loss as to why this should have helped. (I’m working with tinro).
1 Like
Yeah…sorry I have not worked with tinro…though I know quite a bit of the community really likes it. I know it works fairly similar to the svelte-routing library though. You can see how I set it up in my App.svelte file above…maybe that will be of assistance, but would need to see at least an example of how you have your file set up in order to help you more. Glad you got it working though!
1 Like
Yeah, the one thing is that when a user is logged in and the page is refreshed, the app briefly “flashes” the content that should be shown only while logged out, presumably while the user store settles (to check if the user is logged in with Meteor.user()). Is that just a general issue with svelte that you also experience with svelte-routing, or is it unique to my experience?
It looks like I’m having the same kind of issue with svelte-navigator as well (a more actively developed fork of svelte-routing). However, this works a little better. It looks like Meteor.userId() resolves more quickly than Meteor.user() so I will try using that to get around the flashing issue.
That did indeed get around the issue. There is still a frame of flashing as components are destroyed and rendered and the like, but it feels snappy.
1 Like