Creating routes in Remix - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a route file named index.jsx that exports a default component.

Remix

export default function [1]() {
  return <h1>Home Page</h1>;
}

Drag options to blanks, or click blank then click option'

AIndex

BApp

CHomePage

DRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that is not descriptive or confusing.

Not exporting a default function.

In Remix, the default export function name in a route file can be any valid name, but Index is a common choice for the root route component.

2fill in blank

medium

Complete the code to import the Link component from Remix for navigation.

Remix

import { [1] } from "@remix-run/react";

Drag options to blanks, or click blank then click option'

ARoute

BRouter

CLink

DNavLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Route or Router instead of Link.

Forgetting to import from @remix-run/react.

The Link component from @remix-run/react is used to create navigation links between routes.

3fill in blank

hard

Fix the error in the route loader function to return JSON data correctly.

Remix

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

export async function loader() {
  const data = { message: "Hello" };
  return [1](data);
}

Drag options to blanks, or click blank then click option'

Aresponse

Bsend

CreturnData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to return raw objects without wrapping in json.

Using undefined functions like response or send.

In Remix, the json function from @remix-run/node is used to return JSON responses from loaders.

4fill in blank

hard

Fill both blanks to create a nested route file that exports a default component and a loader function.

Remix

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

export async function [1]() {
  return [2]({ greeting: "Hi" });
}

export default function Greeting() {
  return <h2>Greeting Route</h2>;
}

Drag options to blanks, or click blank then click option'

Aloader

Bjson

Caction

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the loader function incorrectly.

Not wrapping the returned data with json.

The loader function must be named loader and return data wrapped with the json function.

5fill in blank

hard

Fill all three blanks to create a route component that uses the loader data with the useLoaderData hook.

Remix

import { json } from "@remix-run/node";
import { [1] } from "@remix-run/react";

export async function loader() {
  return [2]({ user: "Alice" });
}

export default function User() {
  const data = [3]();
  return <p>User: {data.user}</p>;
}

Drag options to blanks, or click blank then click option'

AuseLoaderData

Bjson

DuseData

Attempts:

3 left

💡 Hint

Common Mistakes

Importing or calling the wrong hook.

Not wrapping loader return data with json.

Forgetting to call the hook as a function.

Import useLoaderData from Remix React, return JSON data with json, and call useLoaderData() inside the component to access loader data.

Practice

1. In Remix, how do you create a new route that matches the URL path /about?

easy

A. Create a file named about.jsx inside the app/routes folder.

B. Add a function named about() in app/root.jsx.

C. Create a folder named about inside app/components.

D. Add a route entry in a routes configuration file.

Solution

1. Step 1: Understand Remix routing structure

   Remix creates routes based on files inside the app/routes folder.

2. Step 2: Match file name to URL path

   To create a route for /about, create about.jsx inside app/routes.

3. Final Answer:

   Create a file named about.jsx inside the app/routes folder. -> Option A

4. Quick Check:

   Route file name = URL path [OK]

Hint: Route files in app/routes match URL paths directly [OK]

Common Mistakes:

• Trying to add routes in root.jsx instead of app/routes folder
• Creating route files in app/components folder
• Expecting a config file for routes

2. Which of the following is the correct way to define a dynamic route parameter for a user ID in Remix?

easy

A. Create a file named user-$id.jsx inside app/routes.

B. Create a file named user/[id].jsx inside app/routes.

C. Create a file named user/:id.jsx inside app/routes.

D. Create a file named user/{id}.jsx inside app/routes.

Solution

1. Step 1: Recall Remix dynamic route syntax

   Remix uses square brackets [param] in file names to define dynamic route parts.

2. Step 2: Match dynamic user ID route

   For a user ID parameter, the file should be named user/[id].jsx.

3. Final Answer:

   Create a file named user/[id].jsx inside app/routes. -> Option B

4. Quick Check:

   Dynamic route uses [param] syntax [OK]

Hint: Use square brackets [param] for dynamic route files [OK]

Common Mistakes:

• Using $id or :id instead of [id]
• Using curly braces {id} which is invalid
• Placing dynamic routes outside app/routes

3. Given the file app/routes/blog/[slug].jsx exporting a React component that renders <h1>{params.slug}</h1>, what will be rendered when visiting /blog/hello-world?

medium

A. Nothing, route not found

B. [slug]

C. blog/hello-world

D. hello-world

Solution

1. Step 1: Understand dynamic route parameter usage

   The file [slug].jsx captures the URL part after /blog/ as slug.

2. Step 2: Rendered output for /blog/hello-world

   The component renders <h1>{params.slug}</h1>, so params.slug is hello-world.

3. Final Answer:

   <h1>hello-world</h1> -> Option D

4. Quick Check:

   Dynamic param value = hello-world [OK]

Hint: Dynamic route param matches URL segment inside [brackets] [OK]

Common Mistakes:

• Expecting literal [slug] text to render
• Confusing full path with param value
• Assuming route does not exist

4. You created a file app/routes/profile.jsx but visiting /profile shows a 404 error. What is the most likely cause?

medium

A. The file does not export a React component as default.

B. The file name should be profile.js instead of profile.jsx.

C. You need to add a route entry in a config file.

D. The route path should be /profiles to match the file.

Solution

1. Step 1: Check route file export requirements

   Remix requires route files to export a React component as the default export.

2. Step 2: Identify cause of 404 error

   If the file exists but does not export a default React component, Remix treats it as no route, causing 404.

3. Final Answer:

   The file does not export a React component as default. -> Option A

4. Quick Check:

   Default export React component required [OK]

Hint: Always export a default React component in route files [OK]

Common Mistakes:

• Using named exports only without default export
• Wrong file extension causing import issues
• Expecting config file for routes

5. You want to create nested routes for a blog: /blog shows a list, and /blog/[postId] shows a post detail. How should you organize files in app/routes?

hard

A. Create blog.jsx and blog/[postId].jsx inside app/routes.

B. Create blog/index.jsx and blog-postId.jsx inside app/routes.

C. Create a folder blog with index.jsx and [postId].jsx inside it.

D. Create blog-list.jsx and blog-post.jsx inside app/routes.

Solution

1. Step 1: Understand nested route folder structure

   Remix supports nested routes by creating folders with an index.jsx file for the base path.

2. Step 2: Organize blog routes

   Put index.jsx inside blog folder for /blog, and [postId].jsx for dynamic post detail.

3. Final Answer:

   Create a folder blog with index.jsx and [postId].jsx inside it. -> Option C

4. Quick Check:

   Nested routes use folders with index.jsx [OK]

Hint: Use folder with index.jsx for base route, dynamic files for params [OK]

Common Mistakes:

• Placing all files flat without folders for nested routes
• Using dash instead of brackets for dynamic routes
• Naming files incorrectly for nested paths