Routing
87 bites tagged Routing — interview questions with model answers, and 60-second explainers.
Explain the core responsibilities of RouterDelegate, RouteInformationParser, and Router in Flutter
Tests Navigator 2.0 architecture split. RouteInformationParser converts URLs to typed config; RouterDelegate owns state and builds the Navigator; Router wires them together and handles engine intents. Red flag: conflating parsing and state or omitting Router.
Passing Arguments to Flutter Named Routes
Flutter named routes pass data through an arguments field instead of global variables. Use this when navigating to a route that needs an ID or configuration object. Arguments are untyped by default, so unsafe casts crash at runtime.
How do you track page views in a Single Page Application?
This tests SPA analytics beyond classic page loads. A strong answer covers History API pushState and popstate events, framework router hooks like useEffect or afterEach, and beaconing views. A red flag is relying only on window.load or polling URL changes.
Lazy Loading Routes: Faster Initial Loads
Lazy loading routes splits your app into smaller chunks, loading code only when a user visits a specific page. This drastically cuts initial load times for large SPAs. Just be sure not to use Vue's async components directly as route components.
Declarative Route Configuration in Vue
Declarative routing maps URL paths to components like a switchboard. You define a list of routes, and the framework renders the correct view when the URL changes. This is standard for SPAs.
Angular Route Resolvers: Fetch Data Before Navigation
An Angular Route Resolver pre-fetches data, ensuring it's ready *before* your component renders. Use it to load critical data for a route, like a user profile, to avoid showing a loading spinner. The footgun: a slow resolver blocks navigation entirely.
Router History vs. Hash Mode: URL Style and Server Setup
Router history mode determines your SPA's URL style. History mode uses clean URLs (`/users`) but needs server setup, while hash mode uses a hash symbol (`/#/users`) and works out-of-the-box.
Angular: Reading URL Query Parameters
Angular gives you two ways to read URL query params: a static `snapshot` for the initial value, or a `queryParams` Observable for live updates. Use it for values like `?search=term`.
File-Based Routing: Your Filesystem is Your API
File-based routing makes your directory structure the single source of truth for your app's URLs. Creating a file at `routes/about/+page.svelte` automatically creates the `/about` page, no central config needed.
Navigation Guards: Vue's Route Bouncers
Think of navigation guards as bouncers for your app's routes. They intercept route changes to check permissions or fetch data before rendering a page. The old `next()` callback is a trap; accidentally calling it twice can break navigation.
Nested Routes: Mapping URLs to Component Trees
Nested routes map URL segments to components inside other components, like a sub-page within a main layout. This is common for user dashboards with sections like 'profile' and 'settings'. The footgun is forgetting the child router outlet.
Vue Dynamic Routes: Using Parameters
Dynamic routes use one component for many URLs, like a `User` page for `/users/johnny` and `/users/jolyne`. Define a path with a param like `/users/:id` and access its value via `$route.params.id`.
Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: `params` are ignored if you also provide a `path`—use a named route instead.
RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for `<a>` tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard `<a href="...">`, which reloads the page and loses application state.
Client-Side Routing: No More Full Page Reloads
Client-side routing fakes page navigation. Instead of fetching new HTML from a server, it just shows or hides components already loaded, making transitions feel instant. This powers single-page apps (SPAs).
History API: Change URLs Without Page Reloads
The History API lets you manipulate browser session history, enabling single-page app (SPA) routing without full page reloads. It's used to create "virtual" pages by changing the URL and state.
The useSearchParams Hook for URL Queries
The useSearchParams hook gives your client component read-only access to the URL's query string. Use it to build UIs that react to URL changes, like filtering a list or displaying search results.
useNavigate: Programmatic Navigation in React
The `useNavigate` hook gives you a function to change routes from your component's logic, like after a form submission. Use it for event-driven navigation, such as sending a user to their dashboard after login.
useParams: Accessing Dynamic URL Segments
The `useParams` hook lets client components read dynamic URL segments. On a route like `/posts/[slug]`, it returns an object like `{ slug: 'my-post' }`. Remember, it's for client components only and won't see query strings.
The <Route> Component: Mapping URLs to UI
The <Route> component is like a switch statement for your UI, telling your app 'when the URL is X, render component Y'. It's used to define pages like `/dashboard` or `/users/:id`. The footgun is forgetting it must live inside a `<Routes>` component.
Next.js i18n Routing: URLs for a Global Audience
Next.js i18n routing maps locales to URLs, like `/en/about` or `/es/acerca-de`. It's not just text translation; it's building a site structure for each language. This improves SEO and user experience.
Next.js Middleware: Your App's Edge Bouncer
Think of Next.js Middleware as a bouncer at your app's door. It runs code on the edge before a request is processed, letting you redirect, rewrite, or block it. The main footgun is forgetting it runs in a limited Edge Runtime, not a full Node.js.
Next.js: Dynamic API Segments for Flexible Endpoints
Think of dynamic API segments as URL templates. A single file like `app/api/users/[id]/route.ts` can handle requests for any user ID, from `/api/users/1` to `/api/users/99`. The footgun is forgetting to parse the ID, which is always a string.
generateStaticParams: Pre-building Dynamic Pages in Next.js
Think of `generateStaticParams` as a build-time guest list for your dynamic routes. It tells Next.js all possible parameters (like post slugs) upfront to pre-render static pages. The footgun: it only provides params, not the page data itself.
Get Routing bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.