Remix: Linking your pages

We’ve previously added an /about page, and we want to link to it from the homepage.

You can do so using the native HTML tag <a>, which you know is used to build links:

<a href="/about">About</a>

This is a good time to talk about client-side rendering and server-side rendering.

Try that. Put that link somewhere in app/routes/_index.jsx.

Open that page, and the browser devtools. Go in the Network panel, and enable “Preserve log”.

Now click the link.

You’ll see that the link works as a plain normal HTML link, the browser makes a request to the browser for the /about HTML document, and that page is rendered in the browser.

We want to enable client-side navigation, so the first page load is a full roundtrip to the server, but after that, navigation happens client-side, like in a normal React application.

Remix will ask the server just the data it needs, and takes care of refreshing the UI.

First you import Link from @remix-run/react:

import { Link } from "@remix-run/react"

then you use it in this way:

<Link to="/about">About</Link>

Try it!

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

export const meta = () => {

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Welcome to Remix</h1>
      <Link to='/about'>About</Link>

Now retry by clearing the network logs, you’ll see only a single JavaScript bundle is required from the server, which contains the code the /about page needs.

Only 13.kB transferred instead of 241kB, quite an improvement! And the page feels faster to navigate. Note that the URL changed to /about as expected.

Lessons in this unit:

0: Introduction
1: Create your first Remix app
2: The root route
3: File based routing
4: ▶︎ Linking your pages
5: Styling with CSS and Tailwind
6: Create a navigation
7: Dynamic routes and nested routes
8: Connecting a database
9: Data mutations using forms and actions
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!