React Router – navigating between pages with Links

Sebelumnya kita mulai, kita buat dulu sebuah page lagi dengan nama about us

import React from 'react';

const Aboutus = () => {
  return <h1>Aboutus</h1>;
};

export default Aboutus;

Jangan lupa untuk menambahkan routenya di App.js

function App() {
  const router = createBrowserRouter([
    { path: '/', element: <Homepage /> },
    { path: '/about-us', element: <Aboutus /> },
  ]);
  return <RouterProvider router={router} />;
}

Nah untuk mengakses halaman tersebut kita mengetikkan secara manual di browser. Di real life application hal itu tidak mungkin terjadi, kita perlu menambahkan link untuk berpindah-pindah halaman.

Untungnya react-router-dom punya function yang bernama Link, yang memungkinkan kita untuk melakukan navigasi antar halaman, bagaimana caranya? lihat codingan dibawah ini

pertama kita import dulu Link dari react router dom

import { Link } from 'react-router-dom';

lalu gunakan Link untuk membuat navigasi

<Link to="/about-us"></Link>

Link memerlukan property “to” untuk menentukan page mana yang akan di render.

untuk codingan lengkapnya seperti dibawah

import React from 'react';
import { Link } from 'react-router-dom';

const Homepage = () => {
  return (
    <div>
      <h1>Homepage</h1>
      <p>
        Click here to go to
        <Link to="/about-us"> About Us</Link>
      </p>
    </div>
  );
};

export default Homepage;