<Link> y <NavLink> son los componentes proporcionados por react-router-dom para navegar por la aplicación de reacción . Generalmente, usamos etiquetas de anclaje para este propósito mientras navegamos. Entonces, ¿cuál es la diferencia? Vamos a averiguar.
Las etiquetas de anclaje recargarán la página y volverán a representar todos los componentes. Mientras que <Link> y <NavLink> solo volverán a representar los componentes actualizados que coincidan con la ruta URL de la ruta sin recargar. Ayuda a que las aplicaciones de una sola página funcionen más rápido durante el enrutamiento.
<Enlace> Accesorios de componentes:
- to: String u objeto que especifica el nombre de la ruta.
- replace: reemplaza el nombre de ruta en la pila de historial con new.
- innerRef: pasa ref al elemento representado por el componente.
Accesorios del componente <NavLink>:
- to, replace, innerRef igual que el componente de enlace.
- className: especifica el nombre de la clase CSS que desea aplicar al elemento cuando está activo.
- isActive : devuelve un valor booleano tanto si el enlace está activo como si no.
- estilo: Para aplicar CSS en línea.
- end: haga coincidir el nombre de la ruta con precisión con la URL.
Un <NavLink> es un tipo especial de <Link> que sabe si está «activo» o no . Ahora, entendamos esto con la ayuda de un ejemplo.
Módulos Requeridos:
- npm
- crear-reaccionar-app
- reaccionar-enrutador-dom
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una nueva aplicación de reacción con el siguiente comando usando la terminal:
npx create-react-app <project_name>
Paso 2: Vaya a la carpeta del proyecto con el siguiente comando:
cd <project_name>
Paso 3: Instale la dependencia react-router-dom usando el siguiente comando:
npm install react-router-dom
Nota: Para comprobar si la dependencia se ha instalado o no, vaya a package.json y consulte las dependencias.
Paso 4: Cree una nueva carpeta denominada components en la carpeta src y agréguele los archivos Home.js , About.js y Contact.js .
Estructura del proyecto : la estructura de carpetas se verá así:
Ejemplo: este ejemplo demostrará el uso de los componentes Link y NavLink en React-Router-Dom
Home.js
import React from 'react'; const Home = () => { return ( <> <h1 style={{color:"green"}}> Welcome to GeeksForGeeks</h1> </> ) }; export default Home;
About.js
import React from 'react'; const About = () => { return ( <> <h1 style={{color:"green"}}> A Computer Science portal for geeks.</h1> </> ) }; export default About;
Contact.js
import React from 'react'; const Contact = () => { return ( <> <h1 style={{color:"green"}}> This is a Contact Page.</h1> </> ) }; export default Contact;
App.js
import React from "react"; import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom"; import Home from "./components/Home"; import About from "./components/About"; import Contact from "./components/Contact"; function App() { return ( <> <BrowserRouter> <div style={{ display: "flex", background: 'black', padding: '5px 0 5px 5px', fontSize: '20px' }}> <div style={{ margin: '10px' }}> <NavLink to="/" style={({ isActive }) => ({ color: isActive ? 'greenyellow' : 'white' })}> Home </NavLink> </div> <div style={{ margin: '10px' }}> <NavLink to="/about" style={({ isActive }) => ({ color: isActive ? 'greenyellow' : 'white' })}> About </NavLink> </div> <div style={{ margin: '10px' }}> <NavLink to="/contact" style={({ isActive }) => ({ color: isActive ? 'greenyellow' : 'white' })}> Contact </NavLink> </div> </div> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/about" element={<About />} /> <Route exact path="/contact" element={<Contact />} /> </Routes> </BrowserRouter> </> ); } export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por tejaswaniagrawal23 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA