Componentes Link y NavLink en React-Router-Dom

<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

import React from 'react';
const Home = () => {
    
return (
      <>
        <h1 style={{color:"green"}}> 
            Welcome to GeeksForGeeks</h1>
      </>
  )
};
  
export default Home;

import React from 'react';
const About = () => {
  
return (
  <>
     <h1 style={{color:"green"}}>
         A Computer Science portal for geeks.</h1>
  </>
  )
};
  
export default About;

import React from 'react';
const Contact = () => {
   
 return (
    <>
    <h1 style={{color:"green"}}> 
        This is a Contact Page.</h1>
  </>
  )
};
  
export default Contact;

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: