Routes and layouts in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Deno Fresh route component?

Consider a route component in Deno Fresh that returns this JSX:

export default function Page() {
  return (
    

      
Welcome to Fresh!
      
This is the home page.
    
  );
}

What will the user see when visiting this route?

Deno

export default function Page() {
  return (
    <main>
      <h1>Welcome to Fresh!</h1>
      <p>This is the home page.</p>
    </main>
  );
}

A A page showing a heading 'Welcome to Fresh!' and a paragraph 'This is the home page.'

B An empty page with no content

C A page showing only the paragraph 'This is the home page.' without the heading

D A page showing only the heading 'Welcome to Fresh!' without the paragraph

💡 Hint

Look at what JSX elements are returned inside the main tag.

The component returns a main element containing both a heading and a paragraph, so both appear on the page.

❓ state_output

intermediate

What is the output after navigating between nested layouts in Deno Fresh?

Given this nested layout structure:

routes/
  (app)/
    _layout.tsx
    dashboard/
      _layout.tsx
      index.tsx

If the root _layout.tsx renders a header with 'App Header' and the dashboard layout renders a sidebar with 'Dashboard Sidebar', what will be visible when visiting /dashboard?

Deno

/* Root layout */
export default function RootLayout({ children }) {
  return (
    <>
      <header>App Header</header>
      {children}
    </>
  );
}

/* Dashboard layout */
export default function DashboardLayout({ children }) {
  return (
    <>
      <aside>Dashboard Sidebar</aside>
      {children}
    </>
  );
}

/* Dashboard page */
export default function DashboardPage() {
  return <main>Dashboard Content</main>;
}

A Only 'Dashboard Content' is shown, no header or sidebar

B The page shows 'App Header' at top, 'Dashboard Sidebar' on side, and 'Dashboard Content' in main area

C Only 'App Header' and 'Dashboard Content' are shown, no sidebar

D Only 'Dashboard Sidebar' and 'Dashboard Content' are shown, no header

💡 Hint

Think about how nested layouts wrap their children in Fresh.

Nested layouts wrap their children, so the root layout renders the header, then the dashboard layout renders the sidebar, then the page renders its content.

📝 Syntax

advanced

Which option correctly defines a layout component in Deno Fresh?

Layouts in Deno Fresh must export a default function that accepts a children prop. Which of these options is syntactically correct for a layout?

A

export function Layout() {
  return <div>{children}</div>;
}

B

export default function Layout(children) {
  return <div>{children}</div>;
}

C

export default function Layout({ children }) {
  return <div>{children}</div>;
}

D

export default function Layout(props) {
  return <div>{props.child}</div>;
}

💡 Hint

Remember the layout must be a default export and receive children as a prop.

Option C correctly defines a default exported function with destructured children prop and returns it inside a div.

Option C is not a default export.

Option C treats children as a positional argument, which is incorrect.

Option C uses props.child instead of children.

🔧 Debug

advanced

Why does this nested layout not render the child page content?

Given this dashboard layout code:

export default function DashboardLayout() {
  return (
    <>
      
Dashboard Sidebar
    
  );
}

When visiting /dashboard, the sidebar shows but the page content does not. What is the cause?

Deno

export default function DashboardLayout() {
  return (
    <>
      <aside>Dashboard Sidebar</aside>
    </>
  );
}

A The page component inside /dashboard is missing a default export

B The sidebar element is blocking the page content from rendering

C The layout file name must be _layout.tsx, not DashboardLayout.tsx

D The layout does not accept or render the children prop, so page content is missing

💡 Hint

Layouts must render their children to show nested page content.

The layout component must accept a children prop and include it in the returned JSX. Without it, the nested page content is not rendered.

🧠 Conceptual

expert

How does Deno Fresh determine which layout to use for a route?

In Deno Fresh, routes can be nested inside folders with layout files. How does Fresh decide which layout(s) to apply when rendering a page?

A Fresh applies all layouts from the root folder down to the route folder, nesting them in order

B Fresh applies only the layout file in the route's immediate folder, ignoring parent layouts

C Fresh applies only the root layout, ignoring nested layouts

D Fresh applies layouts randomly based on file modification time

💡 Hint

Think about how nested folders and layouts work together.

Fresh applies layouts hierarchically, starting from the root layout and nesting down through each folder's layout until the route, so all layouts wrap the page content in order.

Practice

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

easy

A. To store user data in a database

B. To style the application with CSS

C. To connect URLs to specific content or pages

D. To handle server hardware settings

Solution

1. Step 1: Understand what routes do

   Routes link a URL path to the content or page that should show when that URL is visited.

2. Step 2: Compare options to this definition

   Only To connect URLs to specific content or pages describes connecting URLs to content, which matches the purpose of routes.

3. Final Answer:

   To connect URLs to specific content or pages -> Option C

4. Quick Check:

   Routes = URL to content connection [OK]

Hint: Routes map URLs to pages or content [OK]

Common Mistakes:

• Confusing routes with styling or database tasks
• Thinking routes manage server hardware
• Mixing routes with layout responsibilities

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

easy

A. router.route('/home', function() { return 'Home'; });

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

C. router.add('/home', (req, res) => res.send('Home'));

D. router.handle('/home', () => { print('Home'); });

Solution

1. Step 1: Recall Oak router syntax

   In Oak, routes are defined using methods like router.get(path, handler).

2. Step 2: Check each option's syntax

   router.get('/home', (ctx) => { ctx.response.body = 'Home'; }); uses router.get with a context parameter and sets ctx.response.body, which is correct Oak syntax.

3. Final Answer:

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

4. Quick Check:

   Oak route syntax = router.get(path, ctx) [OK]

Hint: Use router.get with ctx and set ctx.response.body [OK]

Common Mistakes:

• Using non-existent router methods like add or handle
• Not setting ctx.response.body for response
• Confusing callback parameters with Express.js style

3. Given this Deno Oak route and layout setup, what will be the output when visiting '/about'?

const router = new Router();
router.get('/about', (ctx) => { ctx.response.body = 'About Page'; });

const layout = (content) => `
Header
${content}
Footer
`;

// Middleware to wrap response
app.use(async (ctx, next) => {
  await next();
  ctx.response.body = layout(ctx.response.body);
});

app.use(router.routes());
app.use(router.allowedMethods());

medium

A. HeaderAbout PageFooter

B. About Page

C. HeaderFooter

D. Error: layout function not applied

Solution

1. Step 1: Understand route response

   The route sets ctx.response.body to 'About Page' when '/about' is visited.

2. Step 2: Understand middleware wrapping

   The middleware runs after the route, wrapping the body with header and footer HTML using the layout function.

3. Final Answer:

   <header>Header</header>About Page<footer>Footer</footer> -> Option A

4. Quick Check:

   Middleware wraps route output with layout [OK]

Hint: Middleware modifies response after route sets it [OK]

Common Mistakes:

• Ignoring middleware wrapping
• Assuming route output is unchanged
• Confusing order of middleware and routes

4. Identify the error in this Deno Oak route and layout code snippet:

const router = new Router();
router.get('/contact', (ctx) => {
  ctx.response.body = 'Contact Page';
});

const layout = (content) => `
Header
${content}
Footer
`;

app.use(router.routes());
app.use(router.allowedMethods());

app.use(async (ctx, next) => {
  await next();
  ctx.response.body = layout(ctx.response.body);
});

medium

A. router.allowedMethods() is missing

B. Middleware wrapping layout runs after routes, so layout is applied too late

C. ctx.response.body is not set in route handler

D. Middleware wrapping layout runs after routes, so layout is not applied

Solution

1. Step 1: Analyze middleware order

   router.routes() and router.allowedMethods() are registered before the layout middleware.

2. Step 2: Recall route handler behavior in Oak

   When router.routes() matches a route, it executes the handler. The handler sets the response body but does not call next(), terminating the middleware chain at that point.

3. Step 3: Determine layout application

   Subsequent middleware, including the layout wrapper, are never reached for matched routes. Thus, the layout is not applied.

4. Final Answer:

   Middleware wrapping layout runs after routes, so layout is not applied -> Option D

5. Quick Check:

   Middleware after router.routes() skipped on match [OK]

Hint: Layout middleware must precede router.routes() [OK]

Common Mistakes:

• Placing layout middleware after routes
• Forgetting to set ctx.response.body in route
• Misunderstanding middleware execution order

5. You want to create a Deno Oak app with a layout that adds a header and footer to all pages, but only for routes under '/app'. Which approach correctly applies the layout only to those routes?

hard

A. Use a middleware that checks if ctx.request.url.pathname starts with '/app' and wraps response body with layout only then

B. Apply the layout middleware globally to all routes without condition

C. Add the header and footer HTML directly inside each route handler under '/app'

D. Use router.allowedMethods() to apply layout only to '/app' routes

Solution

1. Step 1: Understand the requirement

   The layout should wrap only routes under '/app', not all routes.

2. Step 2: Evaluate each option

   Use a middleware that checks if ctx.request.url.pathname starts with '/app' and wraps response body with layout only then uses middleware that checks the URL path and applies layout conditionally, which is correct and efficient.

3. Step 3: Why other options fail

   Apply the layout middleware globally to all routes without condition applies layout to all routes, ignoring the condition. Add the header and footer HTML directly inside each route handler under '/app' duplicates layout code in every route, which is not DRY. Use router.allowedMethods() to apply layout only to '/app' routes misuses router.allowedMethods(), which only handles HTTP method responses.

4. Final Answer:

   Use a middleware that checks if ctx.request.url.pathname starts with '/app' and wraps response body with layout only then -> Option A

5. Quick Check:

   Conditional middleware applies layout selectively [OK]

Hint: Check URL path in middleware to apply layout selectively [OK]

Common Mistakes:

• Applying layout middleware globally without condition
• Repeating layout code in each route
• Misusing router.allowedMethods() for layout