Why file-based routing simplifies navigation in Remix - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a route component in Remix.

Remix

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

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

AHomePage

BApp

Cindex

DRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component name that doesn't match the file name.

Confusing route component names with other React component names.

In Remix, the file named index.jsx or index.tsx automatically becomes the root route. Naming the component index follows common conventions.

2fill in blank

medium

Complete the code to link to the About page using Remix's Link component.

Remix

import { Link } from '@remix-run/react';

export default function Nav() {
  return <Link to=[1]>About</Link>;
}

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

A'/home'

B'/about'

C'about'

D'/contact'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash in the path.

Using a path that doesn't match any route file.

The to prop in Remix's Link component should be the path string starting with a slash for the route you want to navigate to. Here, '/about' links to the About page.

3fill in blank

hard

Fix the error in the route file name to correctly create a nested route for 'dashboard'.

Remix

File path: app/routes/[1].tsx

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

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

Adashboard/_index

Bdashboard.tsx

Cdashboard/index

Ddashboard

Attempts:

3 left

💡 Hint

Common Mistakes

Placing the route file directly as dashboard.tsx instead of inside a folder.

Naming the file dashboard/index without extension.

To create a nested route in Remix, you create a folder named dashboard inside routes and place an index.tsx file inside it. The full path is routes/dashboard/index.tsx.

4fill in blank

hard

Fill both blanks to create a dynamic route file and access the parameter in Remix.

Remix

File path: app/routes/[1].tsx

import { useParams } from '@remix-run/react';

export default function Post() {
  const params = useParams();
  return <p>Post ID: {params.[2]</p>;
}

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

A$postId

BpostId

C[postId]

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using dollar sign instead of square brackets for dynamic routes.

Mismatching parameter names between file and code.

Dynamic routes in Remix use square brackets in the file name, like [postId].tsx. The parameter name inside useParams() matches the bracket name without brackets, here postId.

5fill in blank

hard

Fill all three blanks to create a nested layout route with an outlet in Remix.

Remix

File path: app/routes/[1].tsx

import { [2] } from '@remix-run/react';

export default function [3]() {
  return (
    <div>
      <h1>Dashboard Layout</h1>
      <[2] />
    </div>
  );
}

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

Adashboard/index

BOutlet

CDashboardLayout

Ddashboard

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing or using Outlet for nested routes.

Naming the file incorrectly for a layout route.

To create a nested layout route in Remix, create app/routes/dashboard.tsx. The component uses Outlet from Remix to render child routes. The component name can be DashboardLayout.