React Router DOM

Install di CLI

npm install --save @types/react-router-dom
npm i @types/react-router-dom

Ubah App.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom"
import Home from "./pages/Home"
import Products from "./pages/Products"
import Cart from "./pages/Cart"
import './App.css'

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

Home.tsx

import { Link } from "react-router-dom"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
  } from "@/components/ui/card"
import React from "react"

export default function Home() {
    return (
        <div className="flex flex-col items-center justify-center min-h-svh select-none">
            <Card className="w-full max-w-[400px]">
                <CardHeader>
                    <CardTitle className="text-3xl text-center">Welcome to Asa Store</CardTitle>
                    <CardDescription className="text-center">Hehehehehe</CardDescription>
                </CardHeader>
                <CardContent className="flex justify-center gap-2">
                    <Link to="/products">
                        <Button>Products Page</Button>
                    </Link>
                    <Link to="/cart">
                        <Button variant="destructive">Cart Page</Button>
                    </Link>
                </CardContent>
            </Card>
        </div>
    )
}

Cart.tsx

import { Link } from "react-router-dom"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
  } from "@/components/ui/card"


export default function Cart() {
  return (
    <div className="flex flex-col items-center justify-center min-h-svh select-none bg-emerald-600">
        <Card className="w-full max-w-[400px]">
            <CardHeader>
                <CardTitle className="text-3xl text-center">Cart</CardTitle>
            </CardHeader>
            <CardContent className="flex justify-center gap-2">
                <Link to="/">
                    <Button>Home</Button>
                </Link>
                <Link to="/products">
                    <Button>Products</Button>
                </Link>
            </CardContent>
        </Card>
    </div>
  )
}

Products.tsx

import { Link } from "react-router-dom"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
  } from "@/components/ui/card"


export default function Products() {
  return (
    <div className="flex flex-col items-center justify-center min-h-svh select-none bg-blue-600">
        <Card className="w-full max-w-[400px]">
            <CardHeader>
                <CardTitle className="text-3xl text-center">Products</CardTitle>
            </CardHeader>
            <CardContent className="flex justify-center gap-2">
                <Link to="/">
                    <Button>Home</Button>
                </Link>
                <Link to="/cart">
                    <Button>Cart</Button>
                </Link>
            </CardContent>
      </Card>
    </div>
  )
}