Top 30 Routing Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   Which strategy reliably tracks all page views in a React Router SPA without missing programmatic navigation or back-button usage?

   • aListen to window.onload and DOMContentLoaded to catch every route change.
   • bPoll location.href with setInterval to detect URL changes continuously.
   • cUse a router hook like useLocation in useEffect, and also handle the initial landing separately.
   • dAttach click event listeners to every navigation link and button in the application.
   Show the answer

   Answer: c · Use a router hook like useLocation in useEffect, and also handle the initial landing separately.

   Router hooks like useLocation capture both programmatic navigation and popstate-driven back/forward changes, while listening to window.onload fails because client-side routing never reloads the page after the initial render.

   Read the full bite: How do you track page views in a Single Page Application?

2. Question 2 of 30

   When an incoming GET request reaches a FastAPI app, how does @app.get("/") enable the correct function to run?

   • aIt delays route binding until the first request arrives to improve startup speed.
   • bIt acts as pure syntax sugar to make the code look cleaner without changing framework behavior.
   • cIt wraps the function so it can parse HTTP requests directly at runtime.
   • dIt registers the function in the app's route table at import time and generates OpenAPI metadata.
   Show the answer

   Answer: d · It registers the function in the app's route table at import time and generates OpenAPI metadata.

   The decorator actively registers the function for GET / in the app's internal route table when the module is imported and simultaneously populates the OpenAPI schema, enabling the ASGI layer to dispatch matching requests. Calling it pure syntax sugar is a common misconception because it fundamentally alters the application's routing registry and automatic documentation rather than leaving framework behavior unchanged.

   Read the full bite: What is the purpose of @app.get("/") in FastAPI?

3. Question 3 of 30

   Which approach correctly defines a FastAPI endpoint that captures an integer item_id from a URL like /items/42?

   • aUse app.get("/items/{item_id}") and define async def read_item(item_id: int): then use item_id directly inside the function
   • bUse app.get("/items/{item_id}") and define async def read_item(id: int): then use id directly inside the function
   • cUse app.get("/items/item_id") and define async def read_item(item_id: int): then read request.path_params["item_id"] inside the function
   • dUse app.get("/items/<item_id>") and define def read_item(item_id): then manually cast with int(item_id) inside the function
   Show the answer

   Answer: a · Use app.get("/items/{item_id}") and define async def read_item(item_id: int): then use item_id directly inside the function

   FastAPI binds curly-braced path segments to function arguments with matching names and type hints, automatically converting and injecting the value. Option B is tempting because the route syntax is correct, but the mismatched argument name breaks the default binding unless you use a Path alias.

   Read the full bite: How do you define and access a FastAPI path parameter?

4. Question 4 of 30

   You place a helper component named utils.svelte inside src/routes/dashboard/. What is true about its routing behavior?

   • aIt does not create a route because SvelteKit requires the plus prefix for route files
   • bIt is ignored unless it exports a load function from +page.js
   • cIt automatically creates a public page at /dashboard/utils
   • dIt only works if the folder is renamed to [utils] with brackets
   Show the answer

   Answer: a · It does not create a route because SvelteKit requires the plus prefix for route files

   SvelteKit only treats files starting with + as route files, so utils.svelte is ignored for routing and does not create a page. Option C reflects the common misconception that any .svelte file inside src/routes automatically becomes a public route.

   Read the full bite: How does src/routes determine routing in SvelteKit?

5. Question 5 of 30

   When implementing route-level lazy loading for an NgModule, which combination ensures the CLI emits a separate chunk without manual build configuration?

   • aThe feature uses loadChildren with a dynamic import and a custom Webpack entry point
   • bThe feature uses loadChildren with a dynamic import and is removed from AppModule imports
   • cThe feature uses loadComponent with a dynamic import while remaining in AppModule imports
   • dThe feature uses a string-based loadChildren path and is declared in AppModule declarations
   Show the answer

   Answer: b · The feature uses loadChildren with a dynamic import and is removed from AppModule imports

   The CLI automatically splits a chunk when it detects a dynamic import in loadChildren and the module is absent from AppModule's static dependency graph. Manual Webpack entry points are a red flag because Angular abstracts the build tool, and keeping an eager import in AppModule forces the feature into the main bundle.

   Read the full bite: How would you implement lazy loading for an Angular feature module?

6. Question 6 of 30

   Which statement accurately describes the behavior of {file_path:path} compared to {file_path} in a FastAPI route definition?

   • aThe :path suffix is a Pydantic validator that ensures the value is a valid filesystem path before passing it to the endpoint
   • bBoth match nested paths like docs/tutorial.md because FastAPI treats str parameters as greedy by default
   • c{file_path:path} uses a Starlette converter to greedily match slashes across segments while {file_path} stops at the next slash
   • dURL-encoding the slashes in the request allows {file_path} to match nested paths without using the :path converter
   Show the answer

   Answer: c · {file_path:path} uses a Starlette converter to greedily match slashes across segments while {file_path} stops at the next slash

   {file_path:path} relies on Starlette's path converter to consume the rest of the URL including slashes, whereas a plain parameter matches only one segment regardless of the str type hint. Option B is wrong because a str annotation does not make routing greedy, and option A incorrectly confuses a router directive with Pydantic validation.

   Read the full bite: What is the :path converter in FastAPI?

7. Question 7 of 30

   You repeatedly open Profile screens for different users and want each to stack so back steps through them. Which API and why?

   • apush, because it unconditionally adds a new instance even if the route already exists
   • bnavigate, because it always adds a fresh instance to the stack
   • cEither one, since navigate and push behave identically in a stack
   • dreplace, because it swaps the current screen while keeping history
   Show the answer

   Answer: a · push, because it unconditionally adds a new instance even if the route already exists

   push always stacks a new instance, which is what a drill-down chain needs. navigate reuses an existing instance of the route rather than always adding one, and replace removes the current screen from history rather than stacking.

   Read the full bite: navigate vs push in a Stack Navigator

8. Question 8 of 30

   How does the History API enable single-page applications to correctly respond when a user navigates with the browser's back or forward buttons?

   • aThe browser automatically re-renders the DOM based on the stateObject associated with the previous history entry.
   • bThe history.pushState() method stores a callback function that is executed when the user navigates back or forward.
   • cIt performs a partial page reload, fetching only the necessary content for the previous state from the server.
   • dIt triggers a popstate event on the window, allowing the application to retrieve the associated stateObject and update its view.
   Show the answer

   Answer: d · It triggers a popstate event on the window, allowing the application to retrieve the associated stateObject and update its view.

   When a user clicks back or forward, the browser fires a popstate event, which the application must listen for to retrieve the stateObject and render the appropriate view. The browser does not automatically re-render the DOM; the application is responsible for updating the UI.

   Read the full bite: History API: Change URLs Without Page Reloads

9. Question 9 of 30

   For which scenario would a developer choose a template.js file instead of a layout.js file in Next.js?

   • aTo define a persistent navigation bar that retains its state across different routes.
   • bTo embed global HTML structure like <html> and <body> tags for the entire application.
   • cTo create a shared UI shell, such as a sidebar, that wraps multiple child pages.
   • dTo ensure a component re-renders and resets its internal state upon every page navigation.
   Show the answer

   Answer: d · To ensure a component re-renders and resets its internal state upon every page navigation.

   The card states that a template.js file should be used when a component needs to re-render and reset its state on every navigation, for example, to trigger a useEffect hook or an enter animation. Layouts, in contrast, are designed to persist state and avoid re-rendering across navigations, making options A, C, and D incorrect as they describe typical layout use cases.

   Read the full bite: Next.js Layouts: Shared UI That Survives Navigation

10. Question 10 of 30

    In a minimal Express app, what does omitting the app.listen call result in?

    • aThe server never binds to a port, so no requests are served
    • bExpress throws an error at startup demanding a port
    • cRoutes respond but on a random default port
    • dThe app serves only the root route and ignores others
    Show the answer

    Answer: a · The server never binds to a port, so no requests are served

    app.listen binds the server to a port; without it nothing accepts connections. Express does not pick a random port, throw automatically, or selectively serve routes.

    Read the full bite: Minimal Express Hello World server

11. Question 11 of 30

    For the route app.get('/users/:id') hit by /users/42?active=true, which is correct?

    • areq.params.id is '42' and req.query.active is 'true'
    • bBoth id and active come from req.params
    • creq.query.id is '42' and req.params.active is 'true'
    • dBoth id and active come from req.query
    Show the answer

    Answer: a · req.params.id is '42' and req.query.active is 'true'

    Named path segments populate req.params and the query string populates req.query. The id is a route param and active is a query param, so the two objects are not interchangeable.

    Read the full bite: Query params vs route params in Express

12. Question 12 of 30

    When a user clicks an internal link, what fundamentally distinguishes client-side routing from server-side routing?

    • aClient-side routing intercepts navigation, swaps views with JavaScript, and updates the URL without fetching a new HTML document from the server.
    • bClient-side routing is primarily a performance technique that preloads pages to make navigation faster than server-side routing.
    • cClient-side routing eliminates the server entirely so the browser can generate all content without any network requests.
    • dClient-side routing uses the virtual DOM to diff updates, whereas server-side routing rebuilds the entire document tree on every navigation.
    Show the answer

    Answer: a · Client-side routing intercepts navigation, swaps views with JavaScript, and updates the URL without fetching a new HTML document from the server.

    The correct answer captures the core architectural difference: the browser owns navigation by intercepting clicks and updating views via JavaScript without requesting a new HTML document. The virtual DOM distractor is tempting but wrong because it confuses routing with rendering, when the real distinction is who controls the document lifecycle.

    Read the full bite: What is the fundamental difference between client-side and server-side routing?

13. Question 13 of 30

    In React Router v6, when two Route paths could both match the current URL, which component picks exactly one to render?

    • aRoutes, because it ranks all child matches and renders only the best fit
    • bSwitch, because it replaces Routes in v6 to handle exclusive rendering
    • cBrowserRouter, because it creates the history object and resolves which path should win
    • dRoute, because it declares the path-to-element mapping and controls its own visibility
    Show the answer

    Answer: a · Routes, because it ranks all child matches and renders only the best fit

    Routes is the matching engine that ranks its child Route elements and renders exactly the best fit. Switch is the old v5 component; it does not replace Routes in v6, which uses ranked matching rather than simply stopping at the first match.

    Read the full bite: Primary roles of BrowserRouter, Routes, and Route, and basic route setup

14. Question 14 of 30

    In a React single-page application, what is the key technical difference between using a framework Link component and a standard anchor tag for internal navigation?

    • aLink is just a stylistic wrapper around an anchor tag that helps avoid prop drilling in deeply nested component trees
    • bLink intercepts the click event and updates the URL using the History API without requesting a new document from the server
    • cLink performs a full page refresh like an anchor tag but caches the HTML response to make subsequent loads faster
    • dLink automatically prefetches every linked route's code and data as soon as it appears on screen, regardless of conditions
    Show the answer

    Answer: b · Link intercepts the click event and updates the URL using the History API without requesting a new document from the server

    Link intercepts the click and uses the History API to change the URL without unloading the page, preserving in-memory React state and avoiding CSS/JS reparsing. The distractor that claims Link is merely a stylistic wrapper is wrong because it fundamentally alters the browser navigation lifecycle to enable client-side routing.

    Read the full bite: Why use Link over <a> for internal navigation?

15. Question 15 of 30

    If app.get('/items/:id') is defined before app.get('/items/new'), what happens for a request to /items/new?

    • aBoth handlers run in sequence
    • bExpress returns a 404 due to the ambiguity
    • cExpress picks the literal /items/new because it is more specific
    • dThe /items/:id route matches first with id equal to 'new', shadowing the literal route
    Show the answer

    Answer: d · The /items/:id route matches first with id equal to 'new', shadowing the literal route

    Express matches in definition order with no specificity preference, so the earlier parameterized route captures 'new' as id. It does not auto-prefer the literal route, run both, or 404.

    Read the full bite: Express route order and matching

16. Question 16 of 30

    When mounting a router with app.use('/users', usersRouter), how should routes inside the router file be defined?

    • aWith the full path, like router.get('/users/:id')
    • bThey must repeat /users or the mount is ignored
    • cWith an absolute path including the host name
    • dRelative to the mount point, like router.get('/:id'), which resolves to /users/:id
    Show the answer

    Answer: d · Relative to the mount point, like router.get('/:id'), which resolves to /users/:id

    The mount prefix is prepended automatically, so routes are defined relative to it; router.get('/:id') becomes /users/:id. Repeating /users yields a doubled /users/users path.

    Read the full bite: Modularizing routes with express.Router

17. Question 17 of 30

    How should a ProtectedRoute wrapper preserve the original destination when redirecting an unauthenticated user from /dashboard to login?

    • aAppend the original path as a query parameter to the login URL
    • bSet the replace prop on Navigate to remember the intended destination
    • cSave the original URL in localStorage before performing the redirect
    • dPass the current location via the state prop on the Navigate component
    Show the answer

    Answer: d · Pass the current location via the state prop on the Navigate component

    The card recommends passing the current location in Navigate's state so the login flow can return the user to /dashboard after authentication. The replace prop only prevents an extra history entry; it does not store the intended destination, making D a common misconception.

    Read the full bite: Implement a protected /dashboard route in React Router

18. Question 18 of 30

    When defining a dynamic UI route in Next.js, what is the fundamental difference between how Pages Router and App Router map the file system to the URL path?

    • aApp Router changes dynamic segment syntax from brackets to named parameters, while Pages Router continues to use bracket notation.
    • bApp Router uses route.js files as page components for every segment, while Pages Router relies solely on [slug].js files for dynamic paths.
    • cApp Router preserves the file-as-route convention but simply renames page files to page.js inside an app folder, keeping all other behavior identical.
    • dApp Router treats folders as route segments and requires page.js for the leaf UI, while Pages Router uses the JavaScript file itself as the route endpoint.
    Show the answer

    Answer: d · App Router treats folders as route segments and requires page.js for the leaf UI, while Pages Router uses the JavaScript file itself as the route endpoint.

    App Router uses folders as route segments and requires page.js for leaf UI, while Pages Router uses JavaScript files directly as route endpoints. Option C is tempting but wrong because App Router is not merely a folder rename; it introduces co-located segment-level primitives like layout.js and loading.js that Pages Router lacks.

    Read the full bite: Compare Pages Router and App Router file-based routing conventions and capabilities

19. Question 19 of 30

    In a standard client-side React Router setup versus a Next.js App Router application, what is the critical difference in HTTP semantics when a user visits an unmatched URL?

    • aReact Router's wildcard route automatically issues an HTTP 404 status for the initial document request, while Next.js not-found.js returns HTTP 200 by default.
    • bBoth routers handle unmatched routes client-side, but React Router requires manual layout wrapping while Next.js preserves shared layouts automatically through file-system conventions.
    • cReact Router relies on implicit file-system routing to discover 404 boundaries, while Next.js App Router requires explicit wildcard route definitions in a central configuration file.
    • dNext.js App Router renders not-found.js on the server and sends a true HTTP 404 status, whereas React Router's catch-all renders in the browser and typically preserves the server's original HTTP 200 response.
    Show the answer

    Answer: d · Next.js App Router renders not-found.js on the server and sends a true HTTP 404 status, whereas React Router's catch-all renders in the browser and typically preserves the server's original HTTP 200 response.

    Next.js App Router's not-found.js convention server-renders a true HTTP 404 response, while React Router's wildcard route only manipulates the DOM client-side and leaves the initial document's HTTP 200 status unchanged. Option A is tempting because it reflects the common misconception that a React Router catch-all route affects the HTTP status code, but the framework has no built-in server-side semantics for doing so.

    Read the full bite: How do you handle 404s in React Router and Next.js App Router?

20. Question 20 of 30

    What is the primary consequence if a parent route component, designed for nested routes, does not include an <Outlet> component?

    • aThe parent component will render, but its own content will be empty as it expects the Outlet to fill it.
    • bChild routes will render, but they will appear as top-level routes, ignoring the parent's layout.
    • cThe router will not recognize the child route paths, resulting in a 404 error.
    • dThe parent component's layout will display, but the content intended for the child routes will not be rendered.
    Show the answer

    Answer: d · The parent component's layout will display, but the content intended for the child routes will not be rendered.

    The card explicitly states that if the <Outlet> is forgotten, "child routes will match the URL but won't render." This means the parent's layout appears, but the child's content is absent, not that the URL matching fails.

    Read the full bite: Nested Routes: Composing UI with <Outlet>

21. Question 21 of 30

    A developer needs to display thousands of product pages, each with a unique ID. How should they implement this in Next.js?

    • aCreate a separate page.js file for every single product ID.
    • bStore all product data in a single app/products/page.js and filter based on query parameters.
    • cUse a dynamic route like app/products/[productId]/page.js.
    • dImplement client-side routing to fetch product data based on the URL hash.
    Show the answer

    Answer: c · Use a dynamic route like app/products/[productId]/page.js.

    Dynamic routes are designed to solve the problem of creating many pages from a single template, making them ideal for collections like product pages. Manually creating a file for each product is unscalable and explicitly advised against in the card.

    Read the full bite: Next.js Dynamic Routes: Pages on Demand

22. Question 22 of 30

    Which scenario best illustrates the primary use case for Next.js's useRouter hook over the Link component?

    • aAutomatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.
    • bDisplaying a list of navigation links in a header that users can click to visit different sections.
    • cImplementing a "Go Back" button that navigates to the previously viewed page in the browser history.
    • dCreating a button that, when clicked, takes the user to a specific external website.
    Show the answer

    Answer: a · Automatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.

    The useRouter hook is designed for programmatic navigation, such as redirecting after an API call or form submission, where the application's logic dictates the route change. Option B describes a static link, which is the primary use case for the Link component. While useRouter can handle history navigation (Option C), its core distinction from Link is for event-driven, application-controlled redirects.

    Read the full bite: useRouter: Programmatic Navigation in Next.js

23. Question 23 of 30

    A SaaS team is building a revenue dashboard in Next.js App Router. They need to ensure unauthenticated users never receive sensitive HTML or data, while avoiding unnecessary edge latency. Which approach aligns with best practices?

    • aCheck localStorage for a token in the root layout and conditionally render the dashboard on the client.
    • bHide the dashboard link in the navigation and redirect unauthenticated users with a client-side useEffect hook.
    • cUse lightweight middleware to catch requests without a session cookie, then validate the token in a server component before fetching data.
    • dValidate the session in edge middleware with a heavy database lookup on every /dashboard request, and render a fallback UI on the client.
    Show the answer

    Answer: c · Use lightweight middleware to catch requests without a session cookie, then validate the token in a server component before fetching data.

    The card emphasizes that the server must gate HTML and data before it ships, and specifically warns against heavy database lookups in edge middleware due to cold-start latency. Option C matches the canonical pattern where lightweight middleware intercepts direct requests and the server component validates the session before any sensitive payload is rendered.

    Read the full bite: Protected Routes: Server Gates, Not Hidden Links

24. Question 24 of 30

    Which combination correctly follows REST conventions for creating a new user?

    • aGET /createUser?name=Ada, read req.query, respond 200
    • bPUT /user, read req.body, respond 200
    • cPOST /users/create, read req.params, respond 204
    • dPOST /users, read fields from req.body, respond 201
    Show the answer

    Answer: d · POST /users, read fields from req.body, respond 201

    Creation uses POST against the plural collection /users, with input in the body and a 201 Created response. GET must be side-effect free and verbs do not belong in REST URLs.

    Read the full bite: Design an Express route to create a user

25. Question 25 of 30

    Which approach best keeps FastAPI router modules decoupled and reusable when applying a shared path prefix like /api/v1?

    • aUse relative paths in the router and apply the shared prefix via app.include_router when mounting
    • bPass the prefix argument directly to the APIRouter constructor instead of to include_router
    • cCreate custom middleware that rewrites incoming URLs to prepend the shared prefix before routing
    • dHardcode the full absolute path in every APIRouter decorator and mount the router without any prefix
    Show the answer

    Answer: a · Use relative paths in the router and apply the shared prefix via app.include_router when mounting

    Defining relative paths in APIRouter and setting the prefix in include_router keeps route definitions separate from URL composition, enabling reuse. Hardcoding full paths scatters configuration, while middleware and router-level prefix arguments add unnecessary complexity.

    Read the full bite: How do you apply a common path prefix across FastAPI routers?

26. Question 26 of 30

    For GET /products/42?sort=price, where do the id 42 and the sort value come from respectively?

    • areq.params.id and req.body.sort
    • breq.params.id and req.query.sort
    • creq.body.id and req.query.sort
    • dreq.query.id and req.params.sort
    Show the answer

    Answer: b · req.params.id and req.query.sort

    42 is a named route segment captured in req.params, while sort=price is part of the query string in req.query. The body is empty on a typical GET.

    Read the full bite: req.params vs req.query vs req.body in Express

27. Question 27 of 30

    How does Express.js determine which specific handler function to execute for an incoming web request?

    • aBy executing the first handler function defined in the application, regardless of method or path.
    • bBy matching only the HTTP method of the request to a defined route.
    • cBy matching only the URL path of the request to a defined route.
    • dBy matching both the HTTP method and the URL path of the request.
    Show the answer

    Answer: d · By matching both the HTTP method and the URL path of the request.

    Express routing connects a request's path and HTTP method to a specific handler function. It requires both components to uniquely identify and execute the correct handler, as stated in the card: 'Each route matches a unique combination of an HTTP method and a URL path.' Options A and C are incomplete, as they only consider one part of the matching criteria. Option A describes a general execution order, not the specific matching logic for a route.

    Read the full bite: Express.js: Basic Request Routing

28. Question 28 of 30

    In Flutter Navigator 2.0, which component receives a typed route configuration and updates the app state to build the Navigator?

    • aRouter
    • bRouteInformationParser
    • cNavigator
    • dRouterDelegate
    Show the answer

    Answer: d · RouterDelegate

    RouterDelegate receives the typed configuration via setNewRoutePath, updates the app state, and builds the Navigator declaratively. RouteInformationParser only converts raw URL strings into typed configurations and does not manage state or widgets.

    Read the full bite: Explain the core responsibilities of RouterDelegate, RouteInformationParser, and Router in Flutter

29. Question 29 of 30

    Inside a GoRoute builder for path '/users/:userId', what is the correct way to provide the userId to the target widget?

    • aAccess ModalRoute.of(context).settings.arguments as the userId
    • bParse context.location manually to pull out the userId substring
    • cPass the full user object through state.extra and cast it in the builder
    • dRead state.params['userId'] and handle the possibility of a null value
    Show the answer

    Answer: d · Read state.params['userId'] and handle the possibility of a null value

    GoRouter exposes matched path parameters in the state.params map, and because the map values are nullable Strings you must null-check before using the userId. Using ModalRoute.of or parsing context.location manually bypasses GoRouter's declarative state, while state.extra breaks deep linking and web navigation because it is not serialized to the URL.

    Read the full bite: Implement a GoRouter path parameter route and access userId in a widget

30. Question 30 of 30

    You mount a products router with app.use('/products', router) and inside it write router.get('/products/:id', ...). Requests to /products/42 return 404. Why?

    • arouter.get only matches POST requests
    • bexpress.Router cannot take path parameters
    • cThe path becomes /products/products/:id because the mount prefix is added again
    • dThe router must be mounted with app.get not app.use
    Show the answer

    Answer: c · The path becomes /products/products/:id because the mount prefix is added again

    The mount path /products is prepended to each router path, so /products/:id inside the router resolves to /products/products/:id. Routes inside a router should be written relative to the mount point.

    Read the full bite: Modularize routes with express.Router