React Suite Breadcrumb utilizado con enlace en siguiente/enlace

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.

Las migas de pan también se pueden usar con enlaces. Esto ayudará a agregar todas las funcionalidades/estilo de los enlaces a las migas de pan.

Sintaxis:

<Breadcrumb separator={'>'} >
    <Breadcrumb.Item >
        <Link href={url}>GeeksforGeeks</Link>
    </Breadcrumb.Item >
</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: 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';
import Link from '@mui/material/Link';
  
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>
                React Suite Breadcrumb Used 
                with Link in next/link
            </h3>
              
            <Breadcrumb separator={'>'} >
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }} >
                    <Link href="https://www.geeksforgeeks.org">
                        GeeksforGeeks
                    </Link>
                </Breadcrumb.Item >
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }} >
                    <Link href="https://write.geeksforgeeks.org/">
                        Computer
                    </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }}  >
                    <Link href="https://www.geeksforgeeks.org/contribute/"> 
                        Science
                    </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }}  >
                    <Link href="https://www.geeksforgeeks.org"> 
                        Portal
                    </Link>
                </Breadcrumb.Item>
            </Breadcrumb>
        </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, usaremos un separador diferente para mostrar la ruta de navegación con Enlace.

import React from 'react';
import Breadcrumb from 'rsuite/Breadcrumb';
import Link from '@mui/material/Link';
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>
                React Suite Breadcrumb Used 
                with Link in next/link
            </h3>
            <Breadcrumb separator={':'} >
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }} >
                    <Link href="https://www.geeksforgeeks.org">
                        GeeksforGeeks
                    </Link>
                </Breadcrumb.Item >
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }} >
                    <Link href="https://write.geeksforgeeks.org/">
                        Computer
                    </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }}  >
                    <Link href="https://www.geeksforgeeks.org/contribute/">
                        Science
                    </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item 
                style={{ marginRight: '6px', marginLeft: '6px' }}  >
                    <Link href="https://www.geeksforgeeks.org">
                        Portal
                    </Link>
                </Breadcrumb.Item>
            </Breadcrumb>
        </div>
    )
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/breadcrumb/#used-with-code-link-code-in-code-next-link-code