Links function for stylesheets in Remix - Step-by-Step Execution

Concept Flow - Links function for stylesheets

Define links() function

↓

Return array of link objects

↓

Remix reads links() output

↓

Inject <link> tags in HTML <head>

↓

Browser loads stylesheets

↓

Styles apply to page

The links() function returns stylesheet info. Remix uses it to add <link> tags in the page head so styles load and apply.

Execution Sample

Remix

export function links() {
  return [{ rel: "stylesheet", href: "/styles/global.css" }];
}

Defines links() returning an array with one stylesheet link for Remix to inject.

Execution Table

Step	Action	Input/Code	Output/Result
1	Call links() function	links() called by Remix	[{ rel: "stylesheet", href: "/styles/global.css" }]
2	Remix reads array	Array with link object	Prepares <link rel="stylesheet" href="/styles/global.css">
3	Inject <link> tag	Add to HTML <head>	<head> contains <link rel="stylesheet" href="/styles/global.css">
4	Browser loads stylesheet	Fetch /styles/global.css	Stylesheet downloaded and parsed
5	Apply styles	CSS rules from stylesheet	Page styled according to CSS rules
6	End	All styles applied	Page fully styled

💡 All stylesheet links processed and styles applied to the page

Variable Tracker

Variable	Start	After links() call	Final
linksOutput	undefined	[{ rel: "stylesheet", href: "/styles/global.css" }]	[{ rel: "stylesheet", href: "/styles/global.css" }]

Key Moments - 3 Insights

Why does links() return an array of objects, not just one object?

Because Remix expects an array to support multiple stylesheets or links. See execution_table step 1 where links() returns an array with one object.

What happens if the href path is wrong?

The browser tries to load the stylesheet but fails, so styles won't apply. This happens after Remix injects the <link> tag (step 4).

Can links() return other link types besides stylesheets?

Yes, links() can return any link tags like preloads or icons, but for stylesheets rel must be "stylesheet" as in step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what does links() return at step 1?

A A string with stylesheet URL

B A single object with rel and href

C An array with one object containing rel and href

D Nothing, it returns undefined

💡 Hint

Check execution_table row 1 under Output/Result column

At which step does Remix add the <link> tag to the HTML head?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at execution_table row 3 describing Inject tag

If you add another stylesheet object to the array returned by links(), what changes in the execution?

A Remix injects multiple <link> tags, one per stylesheet

B Only the first stylesheet is injected

C Remix throws an error

D Stylesheets merge into one file automatically

💡 Hint

Recall that links() returns an array to support multiple stylesheets (key_moments 1)

Concept Snapshot

links() returns an array of link objects
Each object has rel and href
Remix injects these as <link> tags in <head>
Browser loads and applies styles
Supports multiple stylesheets by returning multiple objects

Full Transcript

The links function in Remix returns an array of objects describing stylesheets. Each object has rel set to "stylesheet" and href pointing to the CSS file. Remix calls links() during page rendering, reads the array, and injects <link> tags into the HTML head. The browser then loads these stylesheets and applies the CSS rules to the page. This process allows easy inclusion of stylesheets in Remix apps. Returning an array lets you add multiple stylesheets. If the href is incorrect, the stylesheet won't load and styles won't apply. Remix expects the links function to return an array, even if it has only one stylesheet.

Practice

1. What is the main purpose of the links function in Remix?

easy

A. To tell Remix which CSS files to load for the page

B. To define JavaScript event handlers

C. To fetch data from an API

D. To create server-side routes

Solution

1. Step 1: Understand the role of links in Remix

   The links function is used to specify stylesheets that the page should load.

2. Step 2: Compare with other options

   Options A, B, and D relate to data fetching, JavaScript event handlers, and routing, which are not the purpose of links.

3. Final Answer:

   To tell Remix which CSS files to load for the page -> Option A

4. Quick Check:

   Purpose of links = Load CSS files [OK]

Hint: Remember: links is for stylesheets only [OK]

Common Mistakes:

• Confusing links with data fetching functions
• Thinking links handles JavaScript
• Assuming links creates routes

2. Which of the following is the correct syntax for the links function to load a stylesheet named styles.css?

easy

A. export function links() { return [{ rel: 'stylesheet', href: '/styles.css' }]; }

B. export const links = () => '';

C. function links() { return ''; }

D. export function links() { return '/styles.css'; }

Solution

1. Step 1: Recall the expected return type of links

   The links function must return an array of objects with rel and href keys.

2. Step 2: Check each option's return value

   export function links() { return [{ rel: 'stylesheet', href: '/styles.css' }]; } returns the correct array of objects. Options A, C, and D return strings, which is incorrect.

3. Final Answer:

   export function links() { return [{ rel: 'stylesheet', href: '/styles.css' }]; } -> Option A

4. Quick Check:

   Return array of objects with rel and href = export function links() { return [{ rel: 'stylesheet', href: '/styles.css' }]; } [OK]

Hint: Return an array of objects with rel and href keys [OK]

Common Mistakes:

• Returning a string instead of an array
• Missing the rel property
• Not exporting the function

3. Given this links function in Remix:

export function links() {
  return [
    { rel: 'stylesheet', href: '/main.css' },
    { rel: 'stylesheet', href: '/theme.css' }
  ];
}

What will happen when the page loads?

medium

A. Only /main.css will load as a stylesheet

B. Both /main.css and /theme.css will load as stylesheets

C. No stylesheets will load because multiple objects are not allowed

D. An error will occur due to invalid return type

Solution

1. Step 1: Understand the return value

   The links function returns an array with two objects, each specifying a stylesheet.

2. Step 2: Remix behavior with multiple stylesheets

   Remix will load all stylesheets listed in the array, so both /main.css and /theme.css will be loaded.

3. Final Answer:

   Both /main.css and /theme.css will load as stylesheets -> Option B

4. Quick Check:

   Multiple stylesheet objects = all load [OK]

Hint: Return all stylesheets in an array to load them all [OK]

Common Mistakes:

• Thinking only the first stylesheet loads
• Believing multiple objects cause errors
• Confusing return type with string

4. Identify the error in this links function:

export function links() {
  return {
    rel: 'stylesheet',
    href: '/styles.css'
  };
}

medium

A. The function must be async

B. The href property should be named src

C. The rel property should be 'style' instead of 'stylesheet'

D. The function should return an array, not a single object

Solution

1. Step 1: Check the return type of links

   The links function must return an array of objects, not a single object.

2. Step 2: Verify property names and function type

   The property names rel and href are correct, and the function does not need to be async.

3. Final Answer:

   The function should return an array, not a single object -> Option D

4. Quick Check:

   Return type must be array of objects [OK]

Hint: Always return an array, even for one stylesheet [OK]

Common Mistakes:

• Returning a single object instead of an array
• Using wrong property names like src
• Making the function async unnecessarily

5. You want to load a stylesheet only on a specific route in Remix. Which approach using the links function is correct?

hard

A. Import the CSS file directly in the component without using links

B. Return all stylesheets globally in the root links function

C. Export links from the route file and return the stylesheet only there

D. Use JavaScript to dynamically add <link> tags in the component

Solution

1. Step 1: Understand route-specific stylesheets in Remix

   Each route file can export its own links function to load styles only for that route.

2. Step 2: Compare other options

   Return all stylesheets globally in the root links function loads styles globally, not route-specific. Use JavaScript to dynamically add <link> tags in the component is not recommended in Remix. Import the CSS file directly in the component without using links bypasses Remix's stylesheet management.

3. Final Answer:

   Export links from the route file and return the stylesheet only there -> Option C

4. Quick Check:

   Route-specific links = Export links from the route file and return the stylesheet only there [OK]

Hint: Put links in route file for route-only styles [OK]

Common Mistakes:

• Loading all styles globally instead of per route
• Manipulating DOM directly for styles
• Ignoring Remix's stylesheet conventions