React Router – Navigation bar dan layout

halo, pada halaman home kita sudah menambahkan link ke halaman about us. Tapi bagaimana kalau kita ingin membuat navigation bar seperti website pada umumnya? langsung aja kita buat dulu component navbar’nya. Pertama buat dulu folder di dalam folder src, kalau saya saya beri nama components. Lalu buat file Navbar.js dengan isi code seperti dibawah

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

const Navbar = () => {
  return (
    <nav className="bg-gray-50 dark:bg-gray-700">
      <div className="max-w-screen-xl px-4 py-3 mx-auto md:px-6">
        <div className="flex items-center">
          <ul className="flex flex-row mt-0 mr-6 space-x-8 text-sm font-medium">
            <li>
              <Link
                to={'/'}
                className="text-gray-900 dark:text-white hover:underline"
                aria-current="page"
              >
                Home
              </Link>
            </li>
            <li>
              <Link
                to={'/about-us'}
                className="text-gray-900 dark:text-white hover:underline"
              >
                About Us
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

Lalu pada homepage kita import Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';
import Navbar from '../Components/Navbar';

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

export default Homepage;

Jika kalian lihat di browser, akan ada sebuah navbar di home page, tapi ketika klik about us, navbar kita hilang. Lalu pertanyaannya apakah kita harus menambahkan navbar pada setiap halaman? kalau sekarang cuman punya 2 halaman sih ga masalah ya, tapi kalo kita punya 100 halaman? pasti susah buat maintenance.

Sekarang kita masuk ke pembahasan kedua, yaitu Layouting. Untuk itu kita bikin dulu main file yang akan kita pake sebagai layout yang berisi navbar dan juga tempat untuk menampilkan page yang kita inginkan. Saya beri nama MainLayout.js untuk sementara di dalamnya hanya ada sebuah

import React from 'react';

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

export default MainLayout;

lalu kita modif router yang kita tulis di App.js menjadi seperti dibawah ini

import React from 'react';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';
import Aboutus from './Pages/Aboutus';
import Homepage from './Pages/Homepage';
import MainLayout from './Pages/MainLayout';

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

export default App;

berbeda dengan sebelumnya perhatikan bagian yang ini

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

kita membuat route baru untuk ‘/’ agar menampilkan MainLayout. nah di dalam route baru ini kita menggunakan property children yang menerima array untuk membungkus routes lain yang kita punya. Untuk saat ini kita hanya punya homepage dan about us.

Di dalam MainLayout kita harus mendefinisikan di bagian mana si children dari route ‘/’ akan ditampilkan. untuk itu kita menggunakan component Outlet yang kita import dari react-router-dom.

import React from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from '../Components/Navbar';

const MainLayout = () => {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
};

export default MainLayout;

Jangan lupa menghapus Navbar dari homepage