Routing patterns in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Deno Oak router code?

Consider this Oak router setup in Deno. What will be the response body when a GET request is made to /users/42?

Deno

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router();

router.get('/users/:id', (context) => {
  const userId = context.params.id;
  context.response.body = `User ID is ${userId}`;
});

const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());

// Assume a GET request to /users/42 is made

A "User ID is undefined"

B "User ID is :id"

C "User ID is 42"

D 404 Not Found error

💡 Hint

Look at how the route parameter is accessed from context.params.

The route uses a parameter ':id'. When a request is made to '/users/42', the parameter 'id' is '42'. The handler sets the response body to 'User ID is 42'.

📝 Syntax

intermediate

Which option correctly defines a route that matches any path starting with /api?

In Deno Oak, you want to create a route that matches all paths starting with /api, such as /api/users or /api/products/123. Which route path pattern is correct?

A "/api/:rest*"

B "/api/*"

C "/api/(.*)"

D "/api/:rest+"

💡 Hint

Check Oak's syntax for matching zero or more segments in a route parameter.

In Oak, ':rest*' matches zero or more path segments after /api. The other patterns are either invalid or do not match as expected.

🔧 Debug

advanced

Why does this Oak router code always return 404 for /posts/123?

Examine this Oak router code. Why does a GET request to /posts/123 return 404 Not Found?

Deno

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router();

router.get('/posts/:postId', (ctx) => {
  ctx.response.body = `Post ID: ${ctx.params.postId}`;
});

const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());

// Request: GET /posts/123

A The route path should be '/posts/:id' instead of '/posts/:postId'

B The router is not attached to the app

C ctx.params.postId is undefined because params are not set in Oak

D The order of middleware is wrong; allowedMethods() must come after routes()

💡 Hint

Check the order of app.use calls for middleware.

allowedMethods() must be used after routes() middleware. Otherwise, the router does not handle the route properly and returns 404.

❓ state_output

advanced

What is the response body after these two routes are added?

Given this Oak router code, what will be the response body for a GET request to /items/5?

Deno

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router();

router.get('/items/new', (ctx) => {
  ctx.response.body = "Create new item";
});

router.get('/items/:id', (ctx) => {
  ctx.response.body = `Item ID: ${ctx.params.id}`;
});

const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());

// Request: GET /items/5

A "Item ID: 5"

B "Create new item"

C 404 Not Found

D "Item ID: new"

💡 Hint

Check route matching order and parameter parsing.

The route '/items/new' matches '/items/new'. The route '/items/:id' matches '/items/5' with id='5'.

🧠 Conceptual

expert

Which statement about Oak router middleware order is true?

In Deno Oak, you add middleware with app.use(). You add router.routes() and router.allowedMethods(). Which statement correctly describes the effect of their order?

A router.allowedMethods() must be added before router.routes() to enable route matching

B router.allowedMethods() must be added after router.routes() to correctly handle 405 and 501 responses

C The order does not matter; Oak automatically manages middleware order internally

D router.allowedMethods() replaces router.routes() if added last

💡 Hint

Think about how middleware processes requests in sequence.

allowedMethods() relies on routes() to set the matched route. It must come after to send proper 405 or 501 responses.

Practice

1. What is the main purpose of routing patterns in a Deno web application?

easy

A. To store data in a database

B. To style the webpage with colors and fonts

C. To connect URLs to specific code that runs when those URLs are visited

D. To manage user authentication only

Solution

1. Step 1: Understand routing role

   Routing connects web addresses (URLs) to the code that should run when those addresses are accessed.

2. Step 2: Compare options

   Only To connect URLs to specific code that runs when those URLs are visited describes this connection. Other options describe unrelated tasks like styling or data storage.

3. Final Answer:

   To connect URLs to specific code that runs when those URLs are visited -> Option C

4. Quick Check:

   Routing = URL to code connection [OK]

Hint: Routing links URLs to code that runs on visit [OK]

Common Mistakes:

• Confusing routing with styling or database tasks
• Thinking routing only manages user login
• Believing routing changes page colors

2. Which of the following is the correct way to define a static route using Oak in Deno?

easy

A. router.get('/home', (ctx) => { ctx.response.body = 'Welcome'; });

B. router.route('/home', (ctx) => { ctx.body = 'Welcome'; });

C. router.add('/home', (ctx) => { ctx.response.body = 'Welcome'; });

D. router.get('/home', (ctx) => { return 'Welcome'; });

Solution

1. Step 1: Recall Oak routing syntax

   Oak uses router.get(path, handler) to define GET routes. The handler sets ctx.response.body for response content.

2. Step 2: Check each option

   router.get('/home', (ctx) => { ctx.response.body = 'Welcome'; }); matches correct syntax. router.route('/home', (ctx) => { ctx.body = 'Welcome'; }); uses non-existent method 'route'. router.add('/home', (ctx) => { ctx.response.body = 'Welcome'; }); uses 'add' which is invalid. router.get('/home', (ctx) => { return 'Welcome'; }); returns string instead of setting ctx.response.body.

3. Final Answer:

   router.get('/home', (ctx) => { ctx.response.body = 'Welcome'; }); -> Option A

4. Quick Check:

   Oak static route uses router.get and ctx.response.body [OK]

Hint: Use router.get and set ctx.response.body for static routes [OK]

Common Mistakes:

• Using wrong router method like route or add
• Returning string instead of setting ctx.response.body
• Forgetting to set response body

3. Given this Oak route code in Deno:

router.get('/user/:id', (ctx) => {
  const id = ctx.params.id;
  ctx.response.body = `User ID is ${id}`;
});

// Request URL: /user/42

What will be the response body when visiting /user/42?

medium

A. "User ID is :id"

B. "User ID is 42"

C. "User ID is undefined"

D. "User ID is /user/42"

Solution

1. Step 1: Understand dynamic route parameter

   The route uses ':id' as a placeholder. When URL is '/user/42', ctx.params.id becomes '42'.

2. Step 2: Check response body construction

   The response body uses template string to insert id value, so it becomes 'User ID is 42'.

3. Final Answer:

   "User ID is 42" -> Option B

4. Quick Check:

   Dynamic param ':id' = '42' in response [OK]

Hint: Dynamic params fill ctx.params with URL parts [OK]

Common Mistakes:

• Using literal ':id' instead of param value
• Forgetting to access ctx.params.id
• Assuming undefined if param missing

4. Identify the error in this Oak routing code snippet:

router.get('/post/:postId', (ctx) => {
  const postId = ctx.request.params.postId;
  ctx.response.body = `Post: ${postId}`;
});

medium

A. ctx.response.body cannot be a template string

B. Missing async keyword in handler

C. Route path should not have colon before postId

D. ctx.request.params is undefined; should use ctx.params

Solution

1. Step 1: Check how to access route params in Oak

   Route parameters are accessed via ctx.params, not ctx.request.params.

2. Step 2: Verify other parts

   Async is not required here. Colon before postId is correct for dynamic routes. Template strings are valid for response body.

3. Final Answer:

   ctx.request.params is undefined; should use ctx.params -> Option D

4. Quick Check:

   Use ctx.params for route parameters [OK]

Hint: Use ctx.params, not ctx.request.params for route params [OK]

Common Mistakes:

• Accessing params from ctx.request instead of ctx
• Thinking async is mandatory for all handlers
• Removing colon from dynamic route path

5. You want to create a Deno Oak route that matches URLs like /product/123/review/456 where 123 is the product ID and 456 is the review ID. Which route pattern correctly captures both IDs as parameters?

hard

A. router.get('/product/:productId/review/:reviewId', (ctx) => { /* ... */ });

B. router.get('/product/:productId/:reviewId/review', (ctx) => { /* ... */ });

C. router.get('/product/review/:productId/:reviewId', (ctx) => { /* ... */ });

D. router.get('/product/:productId/review', (ctx) => { /* ... */ });

Solution

1. Step 1: Analyze URL structure

   The URL has 'product', then product ID, then 'review', then review ID in order.

2. Step 2: Match route pattern to URL

   router.get('/product/:productId/review/:reviewId', (ctx) => { /* ... */ }); matches this pattern exactly with dynamic segments ':productId' and ':reviewId' in correct places.

3. Step 3: Check other options

   router.get('/product/:productId/:reviewId/review', (ctx) => { /* ... */ }); misplaces ':reviewId' before 'review' segment. router.get('/product/review/:productId/:reviewId', (ctx) => { /* ... */ }); swaps order. router.get('/product/:productId/review', (ctx) => { /* ... */ }); misses review ID parameter.

4. Final Answer:

   router.get('/product/:productId/review/:reviewId', (ctx) => { /* ... */ }); -> Option A

5. Quick Check:

   Dynamic segments match URL parts in order [OK]

Hint: Match URL parts exactly; use :param for dynamic segments [OK]

Common Mistakes:

• Swapping order of dynamic segments and static parts
• Omitting one of the dynamic parameters
• Placing parameters in wrong URL positions