Setelah sebelumnya kita berhasil membuat 2 halaman baru, yaitu about dan about/team sekarang kita akan menggunakan component Link untuk navigasi halaman, secara fungsi Link sama dengan tag <a> di html, yang membedakan adalah kita dapat berpindah halaman tanpa reload seluruh halaman menggunakan Link, menjadikan web kita SPA (Single Page App).

Sekarang kita akan mengubah 3 file berikut:

1. app/routes/_index.jsx

export const meta = () => {
  return [{ title: "New Remix App" }];
};

export default function Index() {
 return <div>
  <h1>Homepage</h1>
  <a href="/about">Go To About</a>
 </div>;
}

2. app/routes/about.jsx

export const meta = () => {
    return [{ title: "About Page" }];
};

export default function Index() {
    return <div>
     <h1>About Page</h1>
     <a href="/about/team">Go To Team</a>
    </div>;
}

3. app/routes/about_.team.jsx

export const meta = () => {
  return [{ title: "About Page" }];
};

export default function Index() {
  return <div>
   <h1>Team Page</h1>
   <a href="/">Go To Homepage</a>
  </div>;
}

Sekarang coba akses page-page diatas, lalu perhatikan loading bar di browser kalian dan cek juga tab network di inspect element, seperti di video dibawah ini.

Dapat kita lihat setiap kita klik <a> untuk berpindah halaman maka akan load ulang seluruh halaman, sekarang kita bandingan menggunakan component Link.

Sekarang kita mengubah kembali 3 file berikut:

1. app/routes/_index.jsx

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

export const meta = () => {
  return [{ title: "New Remix App" }];
};

export default function Index() {
 return <div>
  <h1>Homepage</h1>
  <Link to="/about">Go To About</Link>
 </div>;
}

2. app/routes/about.jsx

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

export const meta = () => {
    return [{ title: "About Page" }];
};

export default function Index() {
    return <div>
     <h1>About Page</h1>
     <Link to="/about/team">Go To Team</Link>
    </div>;
}

3. app/routes/about_.team.jsx

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

export const meta = () => {
  return [{ title: "About Page" }];
};

export default function Index() {
  return <div>
   <h1>Team Page</h1>
   <Link to="/">Go To Homepage</Link>
  </div>;
}

Sekarang coba akses page-page diatas, lalu kembali perhatikan loading bar di browser kalian dan cek juga tab network di inspect element, seperti di video dibawah ini.

Sekarang dapat kita lihat setiap berpindah halaman tidak lagi load ulang seluruh halaman, dan hanya load file JS yang berisi template dari halaman dipanggil untuk di render menjadi HTML di browser.