React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar el componente Nav Link en React rebass. Nav Link es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente Nav Link, podemos importar el componente Rebass Nav Link.
El componente Nav Link se utiliza para crear una sección de una página cuyo propósito es proporcionar enlaces de navegación.
Sintaxis:
<Link href='link' sx={{ fontWeight: 'bold' }}>Link</Link>
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
Paso 3: Instale React Rebass en su directorio dado.
npm i rebass
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: Este es el ejemplo básico que muestra cómo usar el componente Nav Link.
Javascript
import React from "react";
import { Link } from "rebass";
const App = () => {
return (
<div id='gfg'>
<h2>GeeksforGeeks</h2>
<h4>React Rebass Nav Link Component</h4>
<Link
href="https://www.geeksforgeeks.org/"
sx={{
fontWeight: 'bold',
px: 2,
py: 1,
color: 'red',
}}>
Nav Link
</Link>
</div>
);
};
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Producción:
Referencia: https://rebassjs.org/recipes/nav-link