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>
      ...
    </div>
  )
}

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