Creating routes in Remix - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Remix route component render?

Consider this Remix route component code. What will be displayed on the page when this route is visited?

Remix

export default function RouteComponent() {
  return <h1>Welcome to Remix!</h1>;
}

A A page showing the text: 'Welcome to Remix!'

B A blank page with no content

C An error message because the component is missing a return statement

D A page showing the text: 'Hello World!'

💡 Hint

Look at what the component returns inside the JSX.

The component returns an <h1> element with the text 'Welcome to Remix!'. This will be rendered on the page.

📝 Syntax

intermediate

Which option correctly defines a nested route in Remix?

You want to create a nested route under the path '/dashboard/settings'. Which file structure and code snippet correctly defines this nested route?

A Create a folder 'dashboard' with a file 'settings.tsx' inside it exporting a default component.

B Create a file 'dashboard-settings.tsx' at the root routes folder exporting a default component.

C Create a file 'dashboard.tsx' and inside it define a nested component for settings.

D Create a folder 'settings' with a file 'dashboard.tsx' inside it exporting a default component.

💡 Hint

Nested routes in Remix use folders for parent routes and files inside for children.

In Remix, nested routes are created by folders and files. A folder named 'dashboard' with a file 'settings.tsx' inside creates the nested route '/dashboard/settings'.

❓ state_output

advanced

What is the output of this loader function in a Remix route?

Given this loader function in a Remix route, what will be the JSON response when the route is accessed?

Remix

import { json } from '@remix-run/node';

export async function loader() {
  return json({ message: 'Hello from loader!' });
}

A A blank response with status 204

B A JavaScript error because json is not imported

C {"message":"Hello from loader!"}

D An HTML page with the text 'Hello from loader!'

💡 Hint

The loader returns a JSON response using Remix's json helper.

The loader returns a JSON response with the object { message: 'Hello from loader!' }. The client receives this JSON string.

🔧 Debug

advanced

Why does this Remix route fail to load?

This route file is named 'profile.tsx' and contains this code. Why does the route fail to load?

Remix

import { json } from '@remix-run/node';

export function loader() {
  return { user: 'Alice' };
}

export default function Profile() {
  return <div>Profile Page</div>;
}

A The default export is missing, so the route cannot render.

B The loader must return a Response or use Remix's json helper, returning a plain object causes an error.

C The file name 'profile.tsx' is invalid for a route.

D The loader function must be async, synchronous loaders are not allowed.

💡 Hint

Check what the loader function returns and Remix's expected format.

Remix expects loader functions to return a Response object or use the json helper. Returning a plain object causes a runtime error.

🧠 Conceptual

expert

How does Remix determine which route file to load for the URL '/blog/2024/06/15'?

Given these route files in Remix: - routes/blog.tsx - routes/blog/$year.tsx - routes/blog/$year/$month.tsx - routes/blog/$year/$month/$day.tsx Which route file will Remix use to render the URL '/blog/2024/06/15'?

A routes/blog/$year.tsx

B routes/blog/$year/$month.tsx

C routes/blog.tsx

D routes/blog/$year/$month/$day.tsx

💡 Hint

Remix matches routes by the most specific path segments first.

Remix matches the route with the most path segments matching the URL. For '/blog/2024/06/15', the file with three dynamic segments $year/$month/$day.tsx is the correct match.