From 4e50be7bd07e59e38c69401e7efbd05ba3b677f7 Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Mon, 30 Dec 2024 15:28:16 -0300
Subject: [PATCH] feat: change routing to react router

---
 templates/frontend/vite-react/package.json          |  5 ++---
 templates/frontend/vite-react/src/App.jsx           | 13 +++++++++----
 .../frontend/vite-react/src/components/cards.jsx    |  5 +++--
 .../vite-react/src/components/navigation.jsx        |  4 ++--
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/templates/frontend/vite-react/package.json b/templates/frontend/vite-react/package.json
index 12f07bce..f25e610f 100644
--- a/templates/frontend/vite-react/package.json
+++ b/templates/frontend/vite-react/package.json
@@ -32,8 +32,7 @@
     "near-api-js": "^4.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "wagmi": "^2.14.4",
-    "wouter": "^3.3.5"
+    "react-router": "^7.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -50,4 +49,4 @@
     "vite": "^6.0.3",
     "vite-plugin-eslint": "^1.8.1"
   }
-}
\ No newline at end of file
+}
diff --git a/templates/frontend/vite-react/src/App.jsx b/templates/frontend/vite-react/src/App.jsx
index 309a1c62..d7899360 100644
--- a/templates/frontend/vite-react/src/App.jsx
+++ b/templates/frontend/vite-react/src/App.jsx
@@ -1,10 +1,11 @@
 import { Navigation } from './components/navigation';
 import Home from './pages/home';
-import { Route } from 'wouter';
+
 import HelloNear from './pages/hello_near';
 import { useEffect, useState } from 'react';
 import { NetworkId } from './config.js';
 import { NearContext, Wallet } from '@/wallets/near';
+import { BrowserRouter, Routes, Route } from "react-router";
 
 // Wallet instance
 const wallet = new Wallet({ NetworkId: NetworkId });
@@ -21,9 +22,13 @@ function App() {
 
   return (
     <NearContext.Provider value={{ wallet, signedAccountId }}>
-      <Navigation />
-      <Route path="/" component={Home} />
-      <Route path="/hello-near" component={HelloNear}/>
+      <BrowserRouter>
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/hello-near" element={<HelloNear />} />
+        </Routes>
+      </BrowserRouter>
     </NearContext.Provider>
   )
 }
diff --git a/templates/frontend/vite-react/src/components/cards.jsx b/templates/frontend/vite-react/src/components/cards.jsx
index f37ac9d9..5aa44fe8 100644
--- a/templates/frontend/vite-react/src/components/cards.jsx
+++ b/templates/frontend/vite-react/src/components/cards.jsx
@@ -1,4 +1,5 @@
 import styles from '@/styles/app.module.css';
+import { Link } from 'react-router';
 
 export const Cards = () => {
   return (
@@ -15,12 +16,12 @@ export const Cards = () => {
         <p>Learn how this application works, and what you can build on Near.</p>
       </a>
 
-      <a href="/hello-near" className={styles.card} rel="noopener noreferrer">
+      <Link to="/hello-near" className={styles.card} rel="noopener noreferrer">
         <h2>
           Near Integration <span>-&gt;</span>
         </h2>
         <p>Discover how simple it is to interact with a Near smart contract.</p>
-      </a>
+      </Link>
     </div>
   );
 };
diff --git a/templates/frontend/vite-react/src/components/navigation.jsx b/templates/frontend/vite-react/src/components/navigation.jsx
index a995d9e2..d7dc36b5 100644
--- a/templates/frontend/vite-react/src/components/navigation.jsx
+++ b/templates/frontend/vite-react/src/components/navigation.jsx
@@ -2,7 +2,7 @@ import { useContext,useEffect, useState } from 'react';
 
 import NearLogo from '@/assets/near-logo.svg';
 import { NearContext } from '@/wallets/near';
-import { Link } from 'wouter';
+import { Link } from "react-router";
 import styles from '@/styles/app.module.css';
 
 export const Navigation = () => {
@@ -25,7 +25,7 @@ export const Navigation = () => {
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
-        <Link href="/">
+        <Link to="/">
           <img src={NearLogo} alt="NEAR" width="30" height="24" className={styles.logo} />
         </Link>
         <div className="navbar-nav pt-1">