Así que estaba tratando de reaccionar por primera vez, seguí la documentación y en el router dom me quedé atascado Cuando uso Switch dice "exportar 'Switch' (importado como 'Switch') no se encontró en 'react-router-dom'" En resumen, mi enrutador no funciona y quiero una manera de hacerlo funcionar, también es la última versión de reaccionar, ya que acabo de hacer este proyecto ayer.
import logo from './logo.svg'; import './App.css'; import Navbar from './components/Navbar'; import Form from './components/Form'; import Sus from './components/Sus'; import React from "react"; import { BrowserRouter as Router, // Switch, Routes, Route, Link } from "react-router-dom"; function App() { return ( <Router> <div className=""> <Navbar title="Sus" main="SusHome" about="SusAbout"/> <div className="container my-5"> <Routes> <Route path="/" component={Form}/> <Route path="/sus" component={Sus} /> </Routes> </div> </div> </Router> ); } export default App;Actualización de React Router V5 a V6
Si alguna vez ha usado React Router, sabe que debemos envolver nuestras rutas en este componente <Switch> que garantiza que solo una de estas rutas se cargue al mismo tiempo, en lugar de todas las rutas coincidentes. Algo como esto
export function App() { return ( <div> <Switch> <Route path="/"> <Home /> </Route> </Switch> </div> ) } Ahora con V6 cambiamos el nombre de Switch a Routes y ahora el componente Routes tiene un nuevo accesorio llamado element , donde pasas el componente que necesita para renderizarse dentro de este componente y ser así
export function App() { return ( <div> <Routes> <Route path="/" element={<Home />} /> </Routes> </div> ) }