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.