feat!: agregar React Router

package.json

@@ -11,7 +11,8 @@
 	},
 	"dependencies": {
 		"react": "^19.2.4",
-		"react-dom": "^19.2.4"
+		"react-dom": "^19.2.4",
+		"react-router-dom": "^7.14.2"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^20.5.0",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       react-dom:
         specifier: ^19.2.4
         version: 19.2.4(react@19.2.4)
+      react-router-dom:
+        specifier: ^7.14.2
+        version: 7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     devDependencies:
       '@commitlint/cli':
         specifier: ^20.5.0
@@ -757,6 +760,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
   cosmiconfig-typescript-loader@6.3.0:
     resolution: {integrity: sha512-Akr82WH1Wfqatyiqpj8HDkO2o2KmJRu1FhKfSNJP3K4IdXwHfEyL7MOb62i1AGQVLtIQM+iCE9CGOtrfhR+mmA==}
     engines: {node: '>=v18'}
@@ -1290,6 +1297,23 @@ packages:
     peerDependencies:
       react: ^19.2.4
 
+  react-router-dom@7.14.2:
+    resolution: {integrity: sha512-YZcM5ES8jJSM+KrJ9BdvHHqlnGTg5tH3sC5ChFRj4inosKctdyzBDhOyyHdGk597q2OT6NTrCA1OvB/YDwfekQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.14.2:
+    resolution: {integrity: sha512-yCqNne6I8IB6rVCH7XUvlBK7/QKyqypBFGv+8dj4QBFJiiRX+FG7/nkdAvGElyvVZ/HQP5N19wzteuTARXi5Gw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react@19.2.4:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
@@ -1335,6 +1359,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2249,6 +2276,8 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie@1.1.1: {}
+
   cosmiconfig-typescript-loader@6.3.0(@types/node@25.6.0)(cosmiconfig@9.0.1(typescript@6.0.3))(typescript@6.0.3):
     dependencies:
       '@types/node': 25.6.0
@@ -2741,6 +2770,20 @@ snapshots:
       react: 19.2.4
       scheduler: 0.27.0
 
+  react-router-dom@7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-router: 7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
+  react-router@7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.4
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.4(react@19.2.4)
+
   react@19.2.4: {}
 
   readdirp@5.0.0: {}
@@ -2782,6 +2825,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  set-cookie-parser@2.7.2: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0

src/App.css

@@ -0,0 +1 @@
+

src/App.jsx

@@ -4,14 +4,18 @@ import Cart from "./pages/Cart";
 import Footer from "./Footer";
 import Home from "./pages/Home";
 import Navbar from "./Navbar";
+import { Route, Routes } from "react-router-dom";
+import "./App.css";
 
 function App() {
   return (
     <>
       <Navbar />
       <main className="pb-4">
-        <Home />
-        <Cart />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/cart" element={<Cart />} />
+        </Routes>
       </main>
       <Footer />
     </>

src/Navbar.css

@@ -1,8 +1,11 @@
 nav {
 	font-size: 1rem;
 	width: 100%;
+	position: sticky;
+	top: 0;
 }
 
-nav button {
+nav button,
+a {
 	--uno: "bg-none border-none hover:bg-white/20 rounded-md p-2";
 }

src/Navbar.jsx

@@ -1,4 +1,5 @@
 import "./Navbar.css";
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
   const total = 25000;
@@ -21,7 +22,7 @@ const Navbar = () => {
           </>
         )}
       </div>
-      <button>Total: ${total.toLocaleString("es-CL")}</button>
+      <Link to="/cart">Total: ${total.toLocaleString("es-CL")}</Link>
     </nav>
   );
 };

src/index.css

@@ -3,8 +3,9 @@ body {
 	padding: 0;
 }
 
-#app {
+#root {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 2rem 1fr 2rem;
+	min-height: 100dvh;
 }

src/main.jsx

@@ -4,9 +4,12 @@ import "./index.css";
 import App from "./App.jsx";
 import "@unocss/reset/tailwind.css";
 import "virtual:uno.css";
+import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 );

src/pages/Cart.jsx

@@ -4,7 +4,7 @@ import { pizzaCart } from "../pizzas";
 const Cart = () => {
   const [cart, setCart] = useState(pizzaCart);
   return (
-    <section id="cart">
+    <>
       <h1 className="text-4xl font-bold">Carrito</h1>
       <div id="cartContainer" className="flex gap-4 flex-col">
         {cart.map((pizza) => (
@@ -60,7 +60,7 @@ const Cart = () => {
       >
         Pagar
       </button>
-    </section>
+    </>
   );
 };