Estoy trabajando en el proyecto de reacción. Quiero navegar a mi archivo HTML desde App.js sin abrir una nueva pestaña. Es decir, debería abrirse en la misma pestaña del navegador.
Mi archivo HTML (mapa.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Opens New tab</title> </head> <body> <p>You came here</p> </body> </html>Aplicación.js
import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <a target="_blank" href={process.env.PUBLIC_URL + "map.html"}> {" "} Map </a> </header> </div> ); } export default App;Ahora estoy navegando haciendo esto en App.js
<a target="_blank" href={process.env.PUBLIC_URL + "map.html"} > Map</a>
Quiero navegar a mi página HTML sin abrir la nueva pestaña y también me gustaría saber cómo puedo volver a la página anterior sin hacer clic en el botón Atrás del navegador.
Debe eliminar el atributo target="_blank" del elemento <a> .
import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <a href={process.env.PUBLIC_URL + "map.html"}> {" "} Map </a> </header> </div> ); } export default App;si está tratando de enrutar a map.html onclick, entonces lo está haciendo de manera incorrecta, puede usar react-router-dom
en lugar de crear map.html, debe crear map.js en la carpeta src e importarlo a App.js
para el enrutamiento en reacción, la forma recomendada es el enrutamiento de reacción
map.js (en lugar de map.html)
import React from "react"; const Map = () =>{ return <p>You came here</p> } export default Map;no tienes que escribir etiquetas de cabeza y otras en todas partes
ahora en App.js
import React from "react"; import Map from "./map"; //this is map.js const App = () =>{ return <Map/> } export default App;esto es sin enrutamiento... ahora con enrutamiento en App.js
import React from "react"; import Map from "./map"; //this is map.js import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"; const App = () =>{ return( <> <Link to="/map">Map</Link> <Router> <Switch> <Route path="/map" component={<Map>}/> </Switch> </Router> </> ) } export default App;cuando haga clic en el mapa, mostraremos el contenido de la página map.js en la misma pestaña
Nota: react-router-dom utilizado aquí es la versión 5, la última es la versión 6. lea la documentación oficial de reactjs.