Pembahasan

Navigasi

Lo udah belajar bikin route, sekarang lo perlu tau cara navigasi di antara route tersebut. Sama kayak di Next.js, React Router juga punya component <Link>. Bedanya, alih-alih pake href, lo pake to buat ngasih tahu path yang mau dituju.

Contohnya gini:

app/root.tsx

// import yang lain
import { Link } from 'react-router';

// kode yang lain

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Selain <Link>, lo juga bisa pake component <NavLink>. Component tersebut mirip kayak <Link>, cuman dia punya fitur tambahan kayak buat nentuin apakah link tersebut aktif atau nggak. Ini berguna buat styling link yang aktif, contohnya:

<NavLink> with active class

import { NavLink } from 'react-router';

<NavLink 
  to="/about" 
  className={({ isActive }) => (isActive ? 'text-blue-500' : '')}>
  About
</NavLink>

Kalo mau navigasi programatis, lo bisa pake hook useNavigate. Hook ini mirip kayak useRouter di Next.js, tapi lebih simpel. Lo bisa pake navigate buat pindah ke route lain.

app/routes/home.tsx

import { useNavigate } from 'react-router';

export default function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
}

Kalo navigasi yang butuh interaksi user, lo bisa pake <Link> atau <NavLink>. Tapi, kalo navigasi yang butuh logika atau kondisi tertentu, lo bisa pake useNavigate.

Navigasi

Sudah paham pelajaran ini?

Diskusi