Nested routes and layouts in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a nested route layout in Remix.

Remix

export default function [1]() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

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

AMainLayout

BDashboardPage

CDashboardLayout

DRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using a page component name instead of a layout component name.

Forgetting to include to render nested routes.

The component defining the nested layout is usually named to reflect its purpose, like DashboardLayout. It wraps nested routes with <Outlet />.

2fill in blank

medium

Complete the code to import the component needed to render nested routes in Remix.

Remix

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

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

ALink

BForm

CuseLoaderData

DOutlet

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Link instead of Outlet.

Confusing hooks like useLoaderData with components.

Outlet is the component used to render child routes inside a parent route's layout.

3fill in blank

hard

Fix the error in the nested route file to correctly export the layout component.

Remix

function [1]() {
  return (
    <main>
      <h2>Settings</h2>
      <Outlet />
    </main>
  );
}

export default SettingsLayout;

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

ASettingsLayout

BSettingsPage

CSettings

DLayoutSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching function and export names.

Forgetting to export the component as default.

The function name must match the exported name or be assigned correctly. Here, the function should be named SettingsLayout to match the export.

4fill in blank

hard

Fill both blanks to create a nested route layout that wraps child routes with a header and footer.

Remix

export default function [1]() {
  return (
    <div>
      <header>My App</header>
      [2]
      <footer>© 2024</footer>
    </div>
  );
}

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

AAppLayout

B<Outlet />

C<Children />

DMainLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using <Children /> instead of <Outlet />.

Naming the component something unrelated to layout.

The layout component is named AppLayout and uses <Outlet /> to render nested routes inside the layout.

5fill in blank

hard

Fill all three blanks to create a nested route with a layout that passes a prop to a child component.

Remix

function [1]() {
  const user = { name: "Alex" };
  return (
    <div>
      <h1>Profile</h1>
      <[2] context={user} />
    </div>
  );
}

export default [3];

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

AProfileLayout

BOutlet

DProfilePage

Attempts:

3 left

💡 Hint

Common Mistakes

Using ProfilePage instead of ProfileLayout for the layout.

Not passing props correctly to Outlet.

The layout component is ProfileLayout. It uses <Outlet context={user} /> to pass context to nested routes, which can be accessed in child routes using useOutletContext(). The export matches the component name.