He creado un sitio web como un proyecto de aprendizaje para el aprendizaje de React. Quiero navegar de un componente a otro cada vez que hago clic en los botones de la barra de navegación.
por ejemplo, si alguien hace clic en contacto, debe navegar a la información de contacto a continuación, como se muestra en la imagen.
La barra de navegación es un componente y el contacto es otro componente. Ambos están en camino diferente también.
Avíseme si necesita alguna otra información de mi parte.
//This is NavBar component location src/component/Contact.js import classes from "./NavBar.module.css"; import { Link, Router } from "react-router-dom"; const NavBar = (props) => { return ( <div className={classes.navbar}> <li className={classes.li}> <Link className={classes.a} to={"/Contact"}> Contact </Link> </li> </div> ); }; export default NavBar; //This is Contact component location src/component/Contact.js import classes from "./Contact.module.css"; import { Router, Route } from "react-router-dom"; function Contact() { return ( <footer> <div className={classes.contact}> <p>Contact Me</p> </div> </footer> ); } export default Contact; //This is App Component Location src/UI/App.js import NavBar from "./components/NavBar"; import Contact from "./components/Contact"; import classes from "./App.module.css"; import { Router, Route } from "react-router"; function App() { return ( <div className={classes.appcontrol}> <NavBar /> <Route path="/Contact"> <Contact /> </Route> </div> ); } export default App;`Solo necesita un único componente de Router que envuelva su aplicación para proporcionar el contexto de enrutamiento. Elimine los enrutadores que envuelven los componentes NavBar y Contact , agregue uno alrededor de ambos en la App o envuelva la App en sí misma donde se representa.
Puede convertir el Contact en una Route en la App .
barra de navegación
const NavBar = (props) => { return ( <div className={classes.navbar}> <li className={classes.li}> <Link className={classes.a} to={"/contact"}> Contact </Link> </li> </div> ); };Contacto
function Contact() { return ( <footer> <div className={classes.contact}> <p>Contact Me</p> </div> </footer> ); }aplicación
import NavBar from "./components/NavBar"; import Contact from "./components/Contact"; import classes from "./App.module.css"; import { BrowserRouter as Router, Route } from "react-router-dom"; function App() { return ( <Router> <div className={classes.appcontrol}> <NavBar /> <Route path="/contact"> <Contact /> </Route> </div> </Router> ); }