Panduan Lengkap Menggunakan React Router untuk Navigasi di Aplikasi React

Pendahuluan

React Router adalah library populer untuk menangani navigasi di aplikasi React, terutama aplikasi single-page application (SPA). Dengan TypeScript, kita bisa mendapatkan manfaat dari tipe data statis dan autocompletion, yang membuat kode lebih aman dan mudah dipelihara. Artikel ini akan membahas cara menggunakan React Router di aplikasi React yang diketik dengan TypeScript.

1. Apa Itu React Router?
   React Router membantu Anda membuat navigasi antar halaman di aplikasi React. Dengan bantuan TypeScript, Anda dapat memastikan tipe data untuk route dan parameter lebih konsisten, yang mengurangi potensi bug dalam kode.

2. Instalasi React Router dengan TypeScript
   Pastikan Anda sudah menginstal React dan TypeScript. Untuk menginstal React Router, jalankan perintah berikut:
   

### NPM
npm install react-router-dom
npm install -d @types/react-router-dom


### YARN
yarn add react-router-dom
yarn add -D @types/react-router-dom

Paket @types/react-router-dom menyediakan tipe-tipe yang diperlukan untuk menggunakan React Router dengan TypeScript.

1. Script untuk aplikasi
2. Main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter basename={''}>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

• App.tsx

import {  Route, Routes } from "react-router-dom"
import Nav from "./layout/Nav"
import Home from "./page/Home"
import About from "./page/About "

function App() {

  return (
      <Routes>
        <Route element={<Nav />}>
          <Route index path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
  )


}

export default App

• Nav.Tsx

import React from "react";
import { Link, Outlet } from "react-router-dom";

const Nav = () => {
    const [navClass, setNavClass] = React.useState<string>('');

    const scrollNavigation = () => {
        var scrollUp = document.documentElement.scrollTop;
        if (scrollUp >= 50) {
            setNavClass('is-sticky');
        } else {
            setNavClass('');
        }
    };


    React.useEffect(() => {
        window.addEventListener('scroll', scrollNavigation, true);
        document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

        return () => {
            window.removeEventListener('scroll', scrollNavigation, true);
            document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

        };
    }, []);



    const [activeLink, setActiveLink] = React.useState<string>("/Home");
    const handleLinkClick = (target: string) => {
        setActiveLink(target);
    };



    return (
        <React.Fragment>
            <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
                <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
                    <div className="mx-auto">
                        <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
                            <li>
                                <Link 
                                    to="/" 
                                    onClick={() => handleLinkClick("/")}
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/" ? "active" : ""}`}>Home</Link>
                            </li>
                            <li>

                                <Link 
                                    to="about"
                                    onClick={() => handleLinkClick("/about")} 
                                    className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/about" ? "active" : ""}`}>About</Link>
                            </li>
                        </ul>
                    </div>

                </div>
            </nav>
            <div className={`flex mt-[60px] h-[100vh] ${activeLink === "/about" ? "bg-red-100" : "bg-blue-100"} `}>
            <Outlet />
            </div>

        </React.Fragment>
    )
}

export default Nav

• Home.tsx

const Home = () => {
    return (<div>
        <h1>
        HOME PAGE
        </h1>
    </div>)
}
export default Home 

• About.tsx

const About = () => {
    return (<div>
        <h1>
            ABOUT PAGE
        </h1>
    </div>)
}
export default About 

Itulah panduan menggunakan React Router dengan TypeScript. Anda dapat menyesuaikannya sesuai dengan kebutuhan proyek Anda atau menambahkan lebih banyak contoh berdasarkan fitur yang ingin dijelaskan!