soy nuevo en reaccionar,
Quiero conectar el botón en la página principal con una página de reacción separada. Aquí quiero conectar el enlace de contacto href que dirige a la página de reacción de contacto.
import React from 'react'; (function Nav (){ return( <div id="navid"> <nav className="navbar fixed-top navbar-expand-lg"> <a className="navbar-brand" href="home">Manav</a> <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className="nav-item"> <a className="nav-link" href="./Contact">Colab</a> </li> <li className="nav-item"> <a className="nav-link" href="x">Blogs</a> </li> </ul> </div> </nav> </div> ); } export default Nav;Dado que las aplicaciones React suelen ser SPA (aplicación de una sola página), eso significa que, por lo general, solo hay una página html y React manejará el cambio de contenido en la página. Por lo tanto, el uso de etiquetas <a> no funcionará, ya que espera que exista una página HTML separada que no existe.
La forma correcta es usar una biblioteca de enrutamiento como react-router y usar su componente Link para manejar el enrutamiento o cambiar las páginas.
Debe usar el paquete react-router-dom npm para realizar operaciones de enrutamiento en react.
npm install react-router react-router-domimport { Switch, Route, BrowserRouter } from "react-router-dom" en tu archivo App.js<BrowserRouter> <Switch> <Route> como se muestra a continuación: import Blogs from "./Components/Blogs"; import Colab from "./Components/Colab"; import Nav from "./Pages/Nav"; import { Switch, Route, BrowserRouter } from "react-router-dom"; const App = () => { return ( <div className="App"> <BrowserRouter> <Nav /> <Switch> <Route path="/BLog"> <Blog /> </Route> <Route path="/Colab"> <Colab /> </Route> </Switch> </BrowserRouter> </div> ); }; export default App;App.js vaya a su Nav.jsimport {Link} from "react-router-dom" en Nav.js y configure los enlaces a la ruta como se muestra a continuación: import React from "react"; import { Link } from "react-router-dom"; const Nav = () => { return ( <div> <Link to="Blog" style={linkStyle}> Blog </Link> <Link to="Colab" style={linkStyle}> Colab </Link> </div> ); }; export default Nav; No necesita usar <a className="nav-link" href="x">Blogs</a> en su lugar usamos Link y Route . Puede obtener más información de la documentación de react-Route-dom