Client-Side Routing: React Router vs Svelte SPA Router vs Vue Router

react-router-dom, svelte-spa-router, and vue-router are the core navigation tools for their respective frameworks. They all solve the same problem — keeping the URL in sync with the UI without a full page reload. However, they approach this task in different ways based on how their frameworks handle components and state. Let's look at how they compare in real-world usage.

🗂️ Defining Routes: JSX vs Objects vs Config

react-router-dom uses JSX components to define routes.

• You wrap your routes in a <Routes> container.
• Each path is a <Route> element with a path and element prop.

// react-router-dom: JSX-based routes
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

svelte-spa-router uses a simple JavaScript object.

• You map path strings directly to Svelte components.
• This keeps routing logic separate from your markup.

// svelte-spa-router: Object map
import Router from 'svelte-spa-router';
import Home from './Home.svelte';
import About from './About.svelte';

const routes = {
  '/': Home,
  '/about': About
};

<Router {routes} />

vue-router uses a configuration array passed to a creator function.

• You define an array of route objects with path and component.
• This config is then injected into the Vue app instance.

// vue-router: Config array
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

🧭 Navigation: Hooks vs Components vs Instance

react-router-dom relies on hooks for programmatic navigation.

• Use the useNavigate hook inside functional components.
• Call the returned function with the target path.

// react-router-dom: useNavigate hook
import { useNavigate } from 'react-router-dom';

function LoginButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/dashboard')}>Login</button>;
}

svelte-spa-router offers both a component and a function.

• Use the <Link> component for declarative links.
• Use the push function for logic-driven navigation.

// svelte-spa-router: Link component and push
import { push } from 'svelte-spa-router';

<a href="/about" use:link>Declarative</a>
<button on:click={() => push('/dashboard')}>Programmatic</button>

vue-router uses the router instance via a hook.

• Call useRouter to get the router object.
• Use router.push to change the location.

// vue-router: useRouter hook
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goHome = () => router.push('/');
    return { goHome };
  }
};

🏷️ Getting URL Parameters

react-router-dom provides a dedicated hook for params.

• useParams returns an object of dynamic segments.
• It updates automatically when the URL changes.

// react-router-dom: useParams
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

svelte-spa-router also uses a hook-like function.

• useParams works similarly to React's version.
• It is reactive within the Svelte component context.

// svelte-spa-router: useParams
import { useParams } from 'svelte-spa-router';

let { id } = useParams();

vue-router gives you the full route object.

• useRoute returns the current route info including params.
• You access params via route.params.

// vue-router: useRoute
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    // route.params.id contains the value
  }
};

🔒 Protecting Routes: Guards and Auth

react-router-dom requires custom wrapper components.

• Version 6 removed built-in auth components.
• You create a component that checks auth and renders <Navigate /> if failed.

// react-router-dom: Custom Private Route
function RequireAuth({ children }) {
  const auth = useAuth();
  return auth.user ? children : <Navigate to="/login" />;
}

svelte-spa-router provides a wrap utility.

• You pass a condition function to wrap.
• It handles the logic before rendering the component.

// svelte-spa-router: wrap utility
import { wrap } from 'svelte-spa-router';

const routes = {
  '/admin': wrap({
    component: Admin,
    condition: () => isAuthenticated()
  })
};

vue-router has built-in navigation guards.

• You can define global guards like beforeEach.
• This runs before any route change occurs.

// vue-router: Global guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return '/login';
  }
});

📦 Lazy Loading Components

react-router-dom leans on React's built-in features.

• Use React.lazy to import components dynamically.
• Wrap the route in a <Suspense> boundary.

// react-router-dom: React.lazy
const About = React.lazy(() => import('./About'));

<Route path="/about" element={
  <Suspense><About /></Suspense>
} />

svelte-spa-router supports dynamic imports in the map.

• You can pass an async function that returns the component.
• The router handles the loading state internally.

// svelte-spa-router: Dynamic import
const routes = {
  '/heavy': async () => { 
    const mod = await import('./Heavy.svelte'); 
    return mod.default; 
  }
};

vue-router allows functions in the component field.

• Return an import promise from the component property.
• Vue handles the chunk loading automatically.

// vue-router: Dynamic component
const routes = [
  { 
    path: '/about', 
    component: () => import('./About.vue') 
  }
];

📊 Summary: Key Differences

💡 The Big Picture

react-router-dom is the flexible choice for React teams who want routing to feel like just another part of their component tree. It puts the power in your hands but requires more setup for things like auth.

svelte-spa-router is the lightweight option for Svelte developers. It stays out of your way and uses simple patterns that match Svelte's philosophy of simplicity.

vue-router is the robust solution for Vue apps. It offers deep integration with Vue's lifecycle and powerful built-in tools for complex navigation needs.

Final Thought: All three libraries are mature and reliable. Your choice should depend on which framework you are using — there is no need to mix them. Pick the one that matches your UI library to ensure the best support and community resources.