Separador personalizado de migas de pan de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente Breadcrumb se utiliza con fines de navegación. Podemos mostrar la ruta de la página actual y volver rápidamente a la página de historial.

Podemos usar separadores personalizados para mostrar las rutas. Estos separadores personalizados pueden ser un guión (-) , AngleRight, signo mayor que (>), etc.

Sintaxis:

<Breadcrumb separator={'>'} >
    <Breadcrumb.Item href="/">
        Some Text
    </Breadcrumb.Item>
</Breadcrumb>

Podemos usar el siguiente enfoque en ReactJS para usar React Suite Breadcrumb.

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 rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

 

Ejemplo 1: en este ejemplo, crearemos separadores de migas de pan personalizados como > (mayor que), – (guion). Podemos utilizar cualquier separador personalizado. Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import Breadcrumb from 'rsuite/Breadcrumb';
 
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks</h1>
            <h3>React Suite Breadcrumb Custom separator</h3>
            <h4 style={{ color: 'red' }}>
                Greater Than sign Separated Breadcrumbs</h4>
            <Breadcrumb separator={'>'}
                style={{ marginRight: '5%' }}>
                <Breadcrumb.Item href="/"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Home
                </Breadcrumb.Item>
                <Breadcrumb.Item href="/components/overview"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Components
                </Breadcrumb.Item>
                <Breadcrumb.Item href="GFG"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Breadcrumb</Breadcrumb.Item>
 
            </Breadcrumb>
            <br></br>
            <h4 style={{ color: 'red' }}>
                Hyphen sign Separated Breadcrumbs</h4>
            <Breadcrumb separator={'-'}>
                <Breadcrumb.Item href="/"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Geeks
                </Breadcrumb.Item>
                <Breadcrumb.Item href="https://geeksforgeeks.org"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    For
                </Breadcrumb.Item>
                <Breadcrumb.Item href="GFG"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Geeks</Breadcrumb.Item>
            </Breadcrumb>
            <br></br>
        </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: En este ejemplo, crearemos más tipos diferentes de separadores.

import React from 'react';
import Breadcrumb from 'rsuite/Breadcrumb';
 
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
             
            <h3>React Suite Breadcrumb Custom separator</h3>
             
            <h4 style={{ color: 'red' }}>
                Colon sign Separated Breadcrumbs</h4>
            <Breadcrumb separator={':'}
                style={{ marginRight: '5%' }}>
                <Breadcrumb.Item href="/"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Home
                </Breadcrumb.Item>
                <Breadcrumb.Item
                    href="/components/overview"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Components
                </Breadcrumb.Item>
                <Breadcrumb.Item href="GFG"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Breadcrumb</Breadcrumb.Item>
 
            </Breadcrumb>
            <br></br>
            <h4 style={{ color: 'red' }}>
                Divide sign Separated Breadcrumbs</h4>
            <Breadcrumb separator={'/'}>
                <Breadcrumb.Item href="/"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Geeks
                </Breadcrumb.Item>
                <Breadcrumb.Item
                    href="https://geeksforgeeks.org"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    For
                </Breadcrumb.Item>
                <Breadcrumb.Item href="GFG"
                    style={{
                        marginRight: '6px',
                        marginLeft: '6px'
                    }}>
                    Geeks</Breadcrumb.Item>
            </Breadcrumb>
            <br></br>
        </div>
    )
}
 
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/breadcrumb/#custom-separator