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.
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.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.
- Script untuk aplikasi
- 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!
Top comments (0)