Client-Side Routing Strategies Across Major Frontend Frameworks

Routing is the backbone of any single-page application (SPA). It keeps the UI in sync with the URL, manages history, and controls which components render. While @angular/router, react-router, svelte-routing, and vue-router all solve this problem, they do so in ways that reflect the philosophy of their host frameworks. Let's look at how they handle the core challenges of modern web development.

🗂️ Defining Routes: Config Objects vs Component Trees

How you declare paths determines how maintainable your app scales. Some prefer a central config file, while others like defining routes alongside components.

@angular/router uses a centralized configuration array.

• You define routes in a dedicated module or config file.
• This makes it easy to see the entire app structure in one place.

// angular: app-routing.module.ts
const routes: Routes = [
  { path: 'users/:id', component: UserComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

react-router lets you define routes as components or config objects.

• In v6+, you wrap your app in a BrowserRouter and use Routes with Route components.
• This keeps route definitions close to where they render in the JSX tree.

// react: App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<User />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

svelte-routing mixes routing components directly into your markup.

• You use Router and Route components inside your main App component.
• It feels very similar to React Router but uses Svelte syntax.

<!-- svelte: App.svelte -->
<script>
  import { Router, Route } from "svelte-routing";
  import User from "./User.svelte";
  import About from "./About.svelte";
</script>

<Router>
  <Route path="users/:id" component={User} />
  <Route path="about" component={About} />
</Router>

vue-router relies on a configuration array passed to the router instance.

• You create a router instance with a routes array.
• This is similar to Angular but integrated into the Vue app creation.

// vue: router/index.js
import { createRouter, createWebHistory } from 'vue-router';

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

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

export default router;

📥 Accessing Parameters: Hooks vs Injected Services

Getting data from the URL (like an ID) is a daily task. Each framework exposes this data differently based on its reactivity model.

@angular/router injects route data via a service.

• You subscribe to the ActivatedRoute observable to get params.
• This fits Angular's dependency injection pattern.

// angular: user.component.ts
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    const id = params['id'];
    // load user
  });
}

react-router provides hooks for functional components.

• Use useParams to get a simple object of parameters.
• It updates automatically when the URL changes.

// react: User.jsx
import { useParams } from "react-router-dom";

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

svelte-routing exposes params via props on the component.

• The Route component passes a params prop to your component.
• You access it directly in the script tag.

<!-- svelte: User.svelte -->
<script>
  export let params = {};
  $: id = params.id;
</script>

<div>User ID: {id}</div>

vue-router makes the route object available via composition API or options.

• Use useRoute in the setup function to access params.
• The object is reactive, so changes trigger updates.

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

export default {
  setup() {
    const route = useRoute();
    const id = route.params.id;
    return { id };
  }
};

🛡️ Protecting Routes: Guards vs Wrappers

Securing pages (like admin dashboards) requires checking permissions before rendering. This is often called "route guarding."

@angular/router has a dedicated CanActivate interface.

• You create a guard service that returns a boolean or observable.
• The router checks this before activating the route.

// angular: auth.guard.ts
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    return authService.isLoggedIn();
  }
}

// In routes config
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

react-router uses wrapper components or loader functions.

• You create a component that checks auth and renders Navigate if failed.
• In v6.4+, you can also use loader functions to throw redirects.

// react: ProtectedRoute.jsx
function ProtectedRoute({ children }) {
  const isAuth = useAuth();
  return isAuth ? children : <Navigate to="/login" />;
}

// Usage
<Route path="/admin" element={<ProtectedRoute><Admin /></ProtectedRoute>} />

svelte-routing handles protection via conditional rendering in routes.

• There is no built-in guard system.
• You check logic inside the component or wrap the route content.

<!-- svelte: App.svelte -->
<Route path="admin">
  {#if isLoggedIn}
    <Admin />
  {:else}
    <Navigate to="/login" />
  {/if}
</Route>

vue-router supports global and per-route navigation guards.

• You define beforeEnter on the route config.
• You can also use global beforeEach guards for app-wide checks.

// vue: router/index.js
const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from) => {
      if (!isLoggedIn) return '/login';
    }
  }
];

🔄 Navigating Programmatically: Services vs Hooks

Sometimes you need to move the user to a new page after an action, like a form submit. Each library provides a way to trigger this via code.

@angular/router uses the Router service injection.

• You call the navigate method with an array of path segments.
• This is done inside component classes or services.

// angular: login.component.ts
constructor(private router: Router) {}

login() {
  this.router.navigate(['/dashboard']);
}

react-router provides the useNavigate hook.

• You call the returned function with the destination path.
• It works inside any functional component.

// react: Login.jsx
import { useNavigate } from "react-router-dom";

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

svelte-routing exposes a navigate function from the package.

• You import it and call it with the target URL.
• It is a simple utility function rather than a hook or service.

<!-- svelte: Login.svelte -->
<script>
  import { navigate } from "svelte-routing";
  function submit() {
    navigate("/dashboard");
  }
</script>

<button on:click={submit}>Login</button>

vue-router gives access to the router instance via useRouter.

• You call the push method on the router object.
• This adds a new entry to the history stack.

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

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

🌱 Similarities: Shared Ground Between Routers

Despite the syntax differences, these libraries solve the same fundamental problems. Here is where they align:

1. 🔗 URL Synchronization

• All four keep the browser address bar in sync with the application state.
• They listen to popstate events to handle browser back/forward buttons.

// Conceptual example shared by all
window.addEventListener('popstate', () => {
  // Update UI to match current URL
});

2. 🧩 Nested Routes

• All support nesting routes to create complex layouts (like dashboards).
• Child routes render inside a parent component's outlet or slot.

// React Example
<Route path="dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
</Route>

// Angular Example
{ path: 'dashboard', component: DashboardComponent, children: [
  { path: 'stats', component: StatsComponent }
]}

3. ⚡ Lazy Loading

• All support loading code only when a route is visited.
• This reduces initial bundle size and improves performance.

// Vue Example
const routes = [
  { path: '/heavy', component: () => import('./HeavyComponent.vue') }
];

// Angular Example
{ path: 'heavy', loadChildren: () => import('./heavy.module').then(m => m.HeavyModule) }

4. 🎨 Transition Hooks

• All allow you to run logic before or after a route change.
• Useful for analytics, page titles, or scroll restoration.

// Vue/React/Angular all support some form of this
router.beforeEach((to, from) => {
  document.title = to.meta.title;
});

📊 Summary: Key Differences

💡 The Big Picture

@angular/router is the most opinionated and feature-rich out of the box. It is built for large-scale enterprise apps where structure and strict typing are critical. If you are in the Angular ecosystem, there is no other choice, but it rewards you with powerful tools like resolvers and complex guard chains.

react-router prioritizes flexibility and composition. It fits the React philosophy of "just JavaScript." It is ideal for teams that want to define routes where they render them and prefer hooks over services. It adapts well to both simple sites and complex dashboards.

svelte-routing is the lightweight contender. It brings routing to Svelte without heavy abstractions. It is perfect for Svelte apps that need standard routing features without the boilerplate of larger frameworks. It feels very natural if you already know Svelte's prop system.

vue-router strikes a balance between configuration and reactivity. It offers the structure of Angular's config with the ease of Vue's reactivity. It is the go-to for Vue apps, providing robust features like named views and scroll behavior control with minimal setup.

Final Thought: Your choice is usually dictated by your framework choice. However, understanding how each handles data flow and protection helps you architect better applications within that ecosystem. Whether you prefer config arrays or component trees, the goal remains the same: keep the URL and UI in perfect harmony.