Componente de navegación ReactJS Reactstrap

Reactstrap es una biblioteca front-end popular que es fácil de usar con componentes React Bootstrap 4. Esta biblioteca contiene los componentes React sin estado para Bootstrap 4. Podemos usar el siguiente enfoque en ReactJS para usar el componente ReactJS Reactstrap Nav.

Accesorios de navegación:

• tabs: Se utiliza para indicar si se le aplican o no los estilos de tabs. 
• Pills : Se utiliza para indicar la navegación de Pills.
• tarjeta: Se utiliza para indicar si se le aplican los estilos de tarjeta o no.
• justificado: Hace que NavItems llene todos los anchos disponibles.
• fill: Hace que los NavItems llenen proporcionalmente todos los anchos disponibles. 
• vertical: Se utiliza para indicar si aplicar o no la alineación vertical.
• horizontal: Se utiliza para indicar si aplicar o no la alineación horizontal.
• barra de navegación: se utiliza para aplicar estilo a una alineación para su uso en una barra de navegación.
• etiqueta: se usa para pasar elementos personalizados para usar.

Accesorios de elementos de navegación:

• etiqueta: se usa para pasar elementos personalizados para usar.
• active: Se utiliza para aplicar la clase de estado activo a este componente.

Accesorios de NavLink:

• disabled: Se utiliza para aplicar la clase de estado disabled a este componente.
• active: Se utiliza para aplicar la clase de estado activo a este componente.
• etiqueta: se usa para pasar elementos personalizados para usar.
• innerRef: se utiliza para obtener una referencia al elemento DOM.

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 , acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install reactstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, hemos usado los apoyos de las píldoras y mostramos Nav en alineación horizontal.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavItem, NavLink } from "reactstrap"
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Nav Component</h4>
            <Nav pills>
                <NavItem>
                    <NavLink href="#" active>Dashboard</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="#">Login</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="#">Signup</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink disabled href="#">About us</NavLink>
                </NavItem>
            </Nav>
        </div >
    );
}
  
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

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, hemos utilizado los apoyos verticales para mostrar Nav en alineación vertical.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavItem, NavLink } from "reactstrap"
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Nav Component</h4>
            <Nav vertical>
                <NavItem>
                    <NavLink href="#" active>Dashboard</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="#">Login</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="#">Signup</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink disabled href="#">About us</NavLink>
                </NavItem>
            </Nav>
        </div >
    );
}
  
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

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://reactstrap.github.io/components/navs/