Tengo problemas para enrutar a otra página. Al hacer clic en la ruta, cambia el enlace pero permanece en el mismo. Lo siento de antemano soy un principiante. Aquí hay una imagen del sitio web y mi código para la página de la ruta.
import React from "react"; const Blank2 = () => { return <main id="mainContent"> <div className="container"> <div className="row justify-content-center mt-5 p-0"> <h3>Blank2</h3> </div> </div> </main> } export default Blank2;mi aplicación.js
import React from "react"; import { Routes ,Route } from 'react-router-dom'; import "./App.css"; import NavBar from "./components/NavBar/NavBar"; import Footer from "./components/Footer/Footer"; import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo"; import Blank1 from "./components/Blank1/Blank1"; import Blank2 from "./components/Blank2/Blank2"; import Blank3 from "./components/Blank3/Blank3"; import image from './image.jpg'; //TODO Web Template Studio: Add routes for your new pages here. const App = () => { return ( <React.Fragment> <NavBar /> <Routes> <Route exact path = "/VolcanoInfo" component = { VolcanoInfo } /> <Route path = "/Blank1" component = { Blank1 } /> <Route path = "/Blank2" component = { Blank2 } /> <Route path = "/Blank3" component = { Blank3 } /> </Routes> <Footer /> </React.Fragment> ); } <header className="App-header"> <img src={image} className="image" alt="image" /> </header> export default App;Para React Router v6, hay un par de cosas que se están haciendo mal aquí. Debe reemplazar el component con el element y hacer uso de BrowserRouter o HashRouter . Además, no necesitamos exact de react-router v6. Tu código se vería así
import {BrowserRouter} from 'react-router-dom'; ... <BrowserRouter> <NavBar /> <Routes> <Route path = "/VolcanoInfo" element= { <VolcanoInfo /> } /> <Route path = "/Blank1" element = { <Blank1 /> } /> <Route path = "/Blank2" element = { <Blank2 /> } /> <Route path = "/Blank3" element = { <Blank3 /> } /> </Routes> <Footer /> </BrowserRouter>Veo que estás usando react-router-dom v6 . React Router Dom es realmente fácil de usar, pero a veces podemos confundirnos con la versión anterior.
Aquí está el enlace al documento oficial v6 sobre la configuración de rutas .
<BrowserRouter> sobre sus rutas.component , v6 usa el element y luego pasa el componente que desea enrutar. (Ej: element={<Blank1 />} )Más detalles en la documentación anterior. ¡Espero que esto ayude!
Tutorial para React Router v6 aquí . Y muchos cambian de v5 a v6 según este documento :
import React from "react"; import { BrowserRouter, Routes ,Route } from 'react-router-dom'; import "./App.css"; import NavBar from "./components/NavBar/NavBar"; import Footer from "./components/Footer/Footer"; import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo"; import Blank1 from "./components/Blank1/Blank1"; import Blank2 from "./components/Blank2/Blank2"; import Blank3 from "./components/Blank3/Blank3"; import image from './image.jpg'; //TODO Web Template Studio: Add routes for your new pages here. const App = () => { return ( <BrowserRouter> <header className="App-header"> <img src={image} className="image" alt="image" /> </header> <NavBar /> <Routes> <Route path = "/VolcanoInfo" element= { <VolcanoInfo /> } /> <Route path = "/Blank1" element= { <Blank1 />} /> <Route path = "/Blank2" element= { <Blank2 />} /> <Route path = "/Blank3" element= { <Blank3 />} /> </Routes> <Footer /> </BrowserRouter> ); } export default App;