Refactorizacion para React Router

package.json

@@ -13,6 +13,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-responsive-carousel": "^3.2.23",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,21 +1,27 @@
 import './App.css';
-import Carrousel from './components/Carrousel';
-import ValoresContenedor from './components/ValoresContenedor';
-import ServiciosContenedor from './components/ServiciosContenedor';
-import ProyectosContenedor from './components/ProyectosContenedor';
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import Navbar from './components/Navbar';
-import Nosotros from './components/Nosotros';
-import Footer from './components/Footer'
+import Footer from './components/Footer';
+import Home from './pages/Home.jsx';
+import NosotrosPage from './pages/NosotrosPage';
+import ServiciosPages from './pages/ServiciosPages';
+
+
+
+
 function App() {
   return (
     <div className="App">
-      <Navbar />
-      <Carrousel />
-      <ValoresContenedor />
-      <Nosotros />
-      <ServiciosContenedor />
-      <ProyectosContenedor />
-      <Footer />
+      <BrowserRouter>
+        <Navbar />
+        <Routes>
+          <Route path='/' exact element={<Home/>} />
+          <Route path='/nosotros' exact element={<NosotrosPage/>} />
+          <Route path='/servicios' exact element={<ServiciosPages/>} />
+
+        </Routes>
+        <Footer />
+      </BrowserRouter>
     </div>
   );
 }

src/components/Menuitems.jsx

@@ -3,22 +3,22 @@
 export const menuItems = [
     {
         title: 'Home',
-        url: '#',
+        url: '/',
         cName: 'nav-links'
     },
     {
-        title: 'Services',
-        url: '#',
+        title: 'Nosotros',
+        url: '/nosotros',
         cName: 'nav-links'
     },
     {
-        title: 'Products',
-        url: '#',
+        title: 'Servicios',
+        url: '/servicios',
         cName: 'nav-links'
     },
     {
-        title: 'Contact Us',
-        url: '#',
+        title: 'Contactanos',
+        url: '/contacto',
         cName: 'nav-links'
     },
 ]

src/pages/Home.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Carrousel from '../components/Carrousel';
+import ValoresContenedor from '../components/ValoresContenedor';
+import Nosotros from '../components/Nosotros';
+import ServiciosContenedor from '../components/ServiciosContenedor';
+import ProyectosContenedor from '../components/ProyectosContenedor';
+
+
+function home() {
+  return (
+    <div>
+      <Carrousel />
+      <ValoresContenedor />
+      <Nosotros />
+      <ServiciosContenedor />
+      <ProyectosContenedor />
+    </div>
+  )
+}
+
+export default home

src/pages/NosotrosPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Nosotros from '../components/Nosotros'
+
+function NosotrosPage() {
+  return (
+    <div><Nosotros /></div>
+  )
+}
+
+export default NosotrosPage

src/pages/ServiciosPages.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ProyectosContenedor from '../components/ProyectosContenedor'
+import ServiciosContenedor from '../components/ServiciosContenedor'
+
+function ServiciosPages() {
+  return (
+    <div>
+      <ServiciosContenedor />
+      <ProyectosContenedor />  
+    </div>
+  )
+}
+
+export default ServiciosPages