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.