Nested routes and layouts in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of nested routes with layouts?

Consider a Remix app with a root layout and a nested route dashboard. The root layout renders a header and an <Outlet />. The dashboard route renders a welcome message. What will the user see when visiting /dashboard?

Remix

/* Root layout component */
import { Outlet } from '@remix-run/react';

export default function Root() {
  return (
    <>
      <header>Site Header</header>
      <Outlet />
    </>
  );
}

/* dashboard.jsx */
export default function Dashboard() {
  return <main>Welcome to your dashboard</main>;
}

A Nothing renders because <Outlet /> is missing in dashboard

B <main>Welcome to your dashboard</main>

C <header>Site Header</header>

D <header>Site Header</header><main>Welcome to your dashboard</main>

💡 Hint

Remember that <Outlet /> in the root layout renders nested routes.

The root layout renders the header and the <Outlet /> placeholder. The nested dashboard route content is rendered inside the <Outlet />. So both header and dashboard content appear.

❓ lifecycle

intermediate

When does a nested layout component re-render in Remix?

In Remix, if you have a nested layout route and a child route, under which condition will the nested layout component re-render?

A When the URL changes to a route outside its nested tree

B When the child route changes but the nested layout route stays the same

C Only when the nested layout route's own loader data changes

D Never re-renders once mounted

💡 Hint

Think about how React components re-render when their props or state change.

The nested layout component re-renders when its child route changes because the <Outlet /> renders different content. The layout itself stays mounted but updates to show the new child.

📝 Syntax

advanced

Which option correctly defines a nested layout route in Remix?

Choose the correct file structure and code snippet to create a nested layout route admin with a nested users route.

A routes/admin/index.jsx with <Outlet /> and routes/admin/users.jsx for users route

B routes/admin.jsx with <Outlet /> and routes/admin.users.jsx for users route

C routes/admin.jsx with <Outlet /> and routes/admin/users.jsx for users route

D routes/admin.jsx without <Outlet /> and routes/users.jsx for users route

💡 Hint

Remember Remix uses file system routing with folders and index.jsx files.

Remix uses folders for nested routes. The admin/index.jsx file should include <Outlet /> to render nested routes. The nested route users is placed in routes/admin/users.jsx.

🔧 Debug

advanced

Why does the nested route content not render inside the layout?

Given this root layout code, the nested route content does not appear. What is the cause?

Remix

export default function Root() {
  return (
    <>
      <header>My Site</header>
      <div>Content here</div>
    </>
  );
}

// Nested route file exists and exports a component

A Header component blocks nested route rendering

B Nested route file name is incorrect

C Missing <Outlet /> component in the root layout to render nested routes

D Nested route component has syntax errors

💡 Hint

Check how nested routes are rendered inside layouts.

In Remix, nested routes render inside the <Outlet /> component. Without it, nested content won't appear.

❓ state_output

expert

What is the final rendered output with nested layouts and shared state?

In a Remix app, the root layout provides a context with a counter state. The nested profile route consumes and increments the counter on a button click. After clicking the button twice, what is the displayed counter value in the profile route?

Remix

import { createContext, useContext, useState } from 'react';
import { Outlet } from '@remix-run/react';

const CounterContext = createContext();

export function Root() {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <header>App Header</header>
      <Outlet />
    </CounterContext.Provider>
  );
}

// profile.jsx
import { useContext } from 'react';
import { CounterContext } from './root';

export default function Profile() {
  const { count, setCount } = useContext(CounterContext);
  return (
    <main>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </main>
  );
}

A Counter: 2

B Counter: 0

C Counter: 1

D Error: Context is undefined

💡 Hint

Think about how React state updates and context work across nested components.

The root layout holds the counter state and provides it via context. The profile route consumes it and increments the count on each button click. After two clicks, the count is 2.