{"id":1443,"date":"2024-07-09T09:27:38","date_gmt":"2024-07-09T12:27:38","guid":{"rendered":"https:\/\/martafagundez.com\/codevolution\/?p=1443"},"modified":"2024-11-20T01:52:11","modified_gmt":"2024-11-20T04:52:11","slug":"cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react","status":"publish","type":"post","link":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/","title":{"rendered":"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React)"},"content":{"rendered":"\n<p>Si ya has creado un componente de <code>navbar<\/code> en tu aplicaci\u00f3n <strong>React<\/strong> utilizando <strong>Bootstrap<\/strong> y ahora quieres asegurarte de que <strong>el men\u00fa del navbar se cierre autom\u00e1ticamente al hacer clic en cualquier enlace<\/strong>, est\u00e1s en el lugar correcto. Aqu\u00ed te mostrar\u00e9 c\u00f3mo hacerlo de manera sencilla.<\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"simpletoc-title\">Tabla de contenidos<\/h2>\n<style>html { scroll-behavior: smooth; }<\/style><ul class=\"simpletoc-list\">\n<li><a href=\"#paso-1-definir-el-estado-de-colapso\">Paso 1: Definir el Estado de Colapso<\/a>\n\n<\/li>\n<li><a href=\"#paso-2-crear-manejadores-de-eventos\">Paso 2: Crear Manejadores de Eventos<\/a>\n\n<\/li>\n<li><a href=\"#paso-3-anadir-eventos-a-los-elementos-del-navbar\">Paso 3: A\u00f1adir Eventos a los Elementos del Navbar<\/a>\n<\/li><\/ul>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-1-definir-el-estado-de-colapso\">Paso 1: Definir el Estado de Colapso<\/h2>\n\n\n<p>Primero, necesitas agregar un estado en tu componente para <strong>controlar si el navbar est\u00e1 colapsado o expandido<\/strong>. Utilizaremos el hook <code>useState<\/code> de React para manejar este estado.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-blur-enabled cbp-unblur-on-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(251, 251, 239, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">MyNavbar.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React, { useState } from 'react';\nimport { NavLink } from &quot;react-router-dom&quot;;\n\nexport default function MyNavbar() {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        &lt;nav className=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;\n            &lt;div className=&quot;container-fluid&quot;&gt;\n                {\/* ...resto del c\u00f3digo *\/}\n\n                {\/* La clase show de Bootstrap se utiliza para mostrar u ocultar el men\u00fa colapsado. *\/}\n                &lt;div className={`collapse navbar-collapse ${isOpen ? 'show' : ''}`} id=&quot;navbarSupportedContent&quot;&gt;\n                    {\/* ...resto del c\u00f3digo *\/}\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n}\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> React, { useState } <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">react<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> { NavLink } <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">react-router-dom<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">export<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">default<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">function<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">MyNavbar<\/span><span style=\"color: #F6F6F4\">() {<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> [isOpen, setIsOpen] <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">useState<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">false<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #F286C4\">nav<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar navbar-expand-lg bg-body-tertiary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            &lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">container-fluid<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                <\/span><span style=\"color: #F286C4\">{<\/span><span style=\"color: #7B7F8B\">\/* ...resto del c\u00f3digo *\/<\/span><span style=\"color: #F286C4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">                <\/span><span style=\"color: #F286C4\">{<\/span><span style=\"color: #7B7F8B\">\/* La clase show de Bootstrap se utiliza para mostrar u ocultar el men\u00fa colapsado. *\/<\/span><span style=\"color: #F286C4\">}<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">                &lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`collapse navbar-collapse <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #F6F6F4\">isOpen<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">show<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&#39;&#39;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">id<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbarSupportedContent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #F286C4\">{<\/span><span style=\"color: #7B7F8B\">\/* ...resto del c\u00f3digo *\/<\/span><span style=\"color: #F286C4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;\/<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            &lt;\/<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;\/<\/span><span style=\"color: #F286C4\">nav<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">JSX<\/span><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-2-crear-manejadores-de-eventos\">Paso 2: Crear Manejadores de Eventos<\/h2>\n\n\n<p>Vamos a crear dos funciones: una para alternar el estado de colapso del navbar y otra para cerrarlo cuando se haga clic en cualquier enlace.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-blur-enabled cbp-unblur-on-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(251, 251, 239, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">MyNavbar.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React, { useState } from 'react';\nimport { NavLink } from &quot;react-router-dom&quot;;\n\nexport default function MyNavbar() {\n    const [isOpen, setIsOpen] = useState(false);\n    \n    \/\/ Alternar el estado isOpen entre true y false cuando se hace clic en el bot\u00f3n del navbar\n    const handleToggle = () =&gt; {\n        setIsOpen(!isOpen);\n    };\n    \n    \/\/ Establecer el estado isOpen en false, cerrando el men\u00fa cuando se hace clic en cualquier enlace\n    const handleClose = () =&gt; {\n    setIsOpen(false);\n    };\n\n    return (\n        &lt;nav className=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;\n            {\/* ...resto del c\u00f3digo *\/}\n        &lt;\/nav&gt;\n    );\n}\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> React, { useState } <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">react<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> { NavLink } <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">react-router-dom<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">export<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">default<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">function<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">MyNavbar<\/span><span style=\"color: #F6F6F4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> [isOpen, setIsOpen] <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">useState<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">false<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #7B7F8B\">\/\/ Alternar el estado isOpen entre true y false cuando se hace clic en el bot\u00f3n del navbar<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">handleToggle<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> () <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">        <\/span><span style=\"color: #62E884\">setIsOpen<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #F286C4\">!<\/span><span style=\"color: #F6F6F4\">isOpen);<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    };<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #7B7F8B\">\/\/ Establecer el estado isOpen en false, cerrando el men\u00fa cuando se hace clic en cualquier enlace<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">handleClose<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> () <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #62E884\">setIsOpen<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">false<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #F286C4\">nav<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar navbar-expand-lg bg-body-tertiary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            <\/span><span style=\"color: #F286C4\">{<\/span><span style=\"color: #7B7F8B\">\/* ...resto del c\u00f3digo *\/<\/span><span style=\"color: #F286C4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;\/<\/span><span style=\"color: #F286C4\">nav<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">JSX<\/span><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-3-anadir-eventos-a-los-elementos-del-navbar\">Paso 3: A\u00f1adir Eventos a los Elementos del Navbar<\/h2>\n\n\n<p>Ahora, vamos a <strong>a\u00f1adir estos manejadores de eventos a los elementos del navbar<\/strong>. Aseg\u00farate de que el bot\u00f3n de toggle del navbar y cada enlace del men\u00fa llamen a estas funciones.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(251, 251, 239, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">MyNavbar.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React, { useState } from 'react';\nimport { NavLink } from &quot;react-router-dom&quot;;\n\nexport default function MyNavbar() {\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () =&gt; {\n        setIsOpen(!isOpen);\n    };\n    \n    const handleClose = () =&gt; {\n    setIsOpen(false);\n    };\n\n    return (\n        &lt;nav className=&quot;navbar navbar-expand-lg bg-body-tertiary&quot;&gt;\n            &lt;div className=&quot;container-fluid&quot;&gt;\n                &lt;NavLink to=&quot;\/&quot; className=&quot;navbar-brand fs-3 fw-bold&quot; onClick={handleClose}&gt;\n                    Brand\n                &lt;\/NavLink&gt;\n\n                &lt;button \n                    className=&quot;navbar-toggler&quot; \n                    type=&quot;button&quot; \n                    onClick={handleToggle}\n                    data-bs-toggle=&quot;collapse&quot; \n                    data-bs-target=&quot;#navbarSupportedContent&quot; \n                    aria-controls=&quot;navbarSupportedContent&quot; \n                    aria-expanded={isOpen ? 'true' : 'false'} \n                    aria-label=&quot;Toggle navigation&quot;\n                &gt;\n                        &lt;span className=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt;\n                &lt;\/button&gt;\n\n                {\/* La clase show de Bootstrap se utiliza para mostrar u ocultar el men\u00fa colapsado. *\/}\n                &lt;div className={`collapse navbar-collapse ${isOpen ? 'show' : ''}`} id=&quot;navbarSupportedContent&quot;&gt;\n                    &lt;ul className=&quot;navbar-nav me-auto mb-2 mb-lg-0&quot;&gt;\n                        &lt;li className=&quot;nav-item&quot;&gt;\n                            &lt;NavLink to=&quot;\/&quot; className={`nav-link ${({ isActive}) =&gt; isActive ? &quot;active&quot; : &quot;&quot;}`} onClick={handleClose}&gt;\n                                Home\n                            &lt;\/NavLink&gt;\n                        &lt;\/li&gt;\n\n                        &lt;li className=&quot;nav-item&quot;&gt;\n                            &lt;NavLink to=&quot;\/link&quot; className={`nav-link ${({ isActive}) =&gt; isActive ? &quot;active&quot; : &quot;&quot;}`} onClick={handleClose}&gt;\n                                Link\n                            &lt;\/NavLink&gt;\n                        &lt;\/li&gt;\n\n                        &lt;li className=&quot;nav-item dropdown&quot;&gt;\n                            &lt;a className=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;\n                                Dropdown\n                            &lt;\/a&gt;\n                            &lt;ul className=&quot;dropdown-menu&quot;&gt;\n                                &lt;li&gt;\n                                    &lt;NavLink to=&quot;\/page-one&quot; className={`dropdown-item ${({ isActive}) =&gt; isActive ? &quot;active&quot; : &quot;&quot;}`} onClick={handleClose}&gt;\n                                        Page One\n                                    &lt;\/NavLink&gt;\n                                &lt;\/li&gt;\n                                &lt;li&gt;\n                                    &lt;NavLink to=&quot;\/page-two&quot; className={`dropdown-item ${({ isActive}) =&gt; isActive ? &quot;active&quot; : &quot;&quot;}`} onClick={handleClose}&gt;\n                                        Page Two\n                                    &lt;\/NavLink&gt;\n                                &lt;\/li&gt;\n                                &lt;li&gt;&lt;hr className=&quot;dropdown-divider&quot; \/&gt;&lt;\/li&gt;\n                                &lt;li&gt;\n                                    &lt;NavLink to=&quot;\/page-three&quot; className={`dropdown-item ${({ isActive}) =&gt; isActive ? &quot;active&quot; : &quot;&quot;}`} onClick={handleClose}&gt;\n                                        Page Three\n                                    &lt;\/NavLink&gt;\n                                &lt;\/li&gt;\n                            &lt;\/ul&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n}\n\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> React, { useState } <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">react<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> { NavLink } <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">react-router-dom<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">export<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">default<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">function<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">MyNavbar<\/span><span style=\"color: #F6F6F4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> [isOpen, setIsOpen] <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">useState<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">false<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">handleToggle<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> () <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        <\/span><span style=\"color: #62E884\">setIsOpen<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #F286C4\">!<\/span><span style=\"color: #F6F6F4\">isOpen);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">handleClose<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> () <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #62E884\">setIsOpen<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">false<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #F286C4\">nav<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar navbar-expand-lg bg-body-tertiary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            &lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">container-fluid<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">to<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar-brand fs-3 fw-bold<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleClose<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    Brand<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;<\/span><span style=\"color: #F286C4\">button<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar-toggler<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">type<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">button<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleToggle<\/span><span style=\"color: #F286C4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">data-bs-toggle<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">collapse<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">data-bs-target<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">#navbarSupportedContent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">aria-controls<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbarSupportedContent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">aria-expanded<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">isOpen <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">true<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">false<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    <\/span><span style=\"color: #62E884; font-style: italic\">aria-label<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Toggle navigation<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;<\/span><span style=\"color: #F286C4\">span<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar-toggler-icon<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">span<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;\/<\/span><span style=\"color: #F286C4\">button<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                <\/span><span style=\"color: #F286C4\">{<\/span><span style=\"color: #7B7F8B\">\/* La clase show de Bootstrap se utiliza para mostrar u ocultar el men\u00fa colapsado. *\/<\/span><span style=\"color: #F286C4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`collapse navbar-collapse <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #F6F6F4\">isOpen<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">show<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&#39;&#39;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">id<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbarSupportedContent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    &lt;<\/span><span style=\"color: #F286C4\">ul<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">navbar-nav me-auto mb-2 mb-lg-0<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">nav-item<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">to<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`nav-link <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #E7EE98\">({ <\/span><span style=\"color: #FFB86C; font-style: italic\">isActive<\/span><span style=\"color: #E7EE98\">}) <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F6F6F4\">isActive<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">active<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;&quot;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleClose<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                Home<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">nav-item<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">to<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/link<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`nav-link <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #E7EE98\">({ <\/span><span style=\"color: #FFB86C; font-style: italic\">isActive<\/span><span style=\"color: #E7EE98\">}) <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F6F6F4\">isActive<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">active<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;&quot;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleClose<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                Link<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">nav-item dropdown<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">nav-link dropdown-toggle<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">href<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">role<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">button<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">data-bs-toggle<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">aria-expanded<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">false<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                Dropdown<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;<\/span><span style=\"color: #F286C4\">ul<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-menu<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                    &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">to<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/page-one<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`dropdown-item <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #E7EE98\">({ <\/span><span style=\"color: #FFB86C; font-style: italic\">isActive<\/span><span style=\"color: #E7EE98\">}) <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F6F6F4\">isActive<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">active<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;&quot;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleClose<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                        Page One<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                    &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                    &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">to<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/page-two<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`dropdown-item <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #E7EE98\">({ <\/span><span style=\"color: #FFB86C; font-style: italic\">isActive<\/span><span style=\"color: #E7EE98\">}) <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F6F6F4\">isActive<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">active<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;&quot;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleClose<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                        Page Two<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                    &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">hr<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-divider<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> \/&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                    &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">to<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/page-three<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #E7EE98\">`dropdown-item <\/span><span style=\"color: #F286C4\">${<\/span><span style=\"color: #E7EE98\">({ <\/span><span style=\"color: #FFB86C; font-style: italic\">isActive<\/span><span style=\"color: #E7EE98\">}) <\/span><span style=\"color: #F286C4\">=&gt;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F6F6F4\">isActive<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">?<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">active<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&quot;&quot;<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #E7EE98\">`<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">onClick<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">handleClose<\/span><span style=\"color: #F286C4\">}<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                        Page Three<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                    &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">NavLink<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                                &lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                            &lt;\/<\/span><span style=\"color: #F286C4\">ul<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                        &lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                    &lt;\/<\/span><span style=\"color: #F286C4\">ul<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">                &lt;\/<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            &lt;\/<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;\/<\/span><span style=\"color: #F286C4\">nav<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">JSX<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Y eso es todo. Con estos simples cambios, <strong>el men\u00fa de tu navbar se cerrar\u00e1 autom\u00e1ticamente cada vez que se haga clic en un enlace<\/strong>, mejorando as\u00ed la experiencia de usuario en dispositivos m\u00f3viles.<\/p>\n\n\n\n<p>Espero que este peque\u00f1o tutorial te haya sido \u00fatil. \u00a1D\u00e9jame tus comentarios si tienes alguna pregunta!<\/p>\n\n\n\n<p>Y si tienes dudas con respecto a c\u00f3mo integrar Bootstrap en tu proyecto con React, estos recursos pueden interesarte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00f3mo instalar Bootstrap en React<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00f3mo usar Bootstrap en Componentes React<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00f3mo Personalizar Bootstrap<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sitio web de Bootstrap<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Si ya has creado un componente de navbar en tu aplicaci\u00f3n React utilizando Bootstrap y ahora quieres asegurarte de que el men\u00fa del navbar se&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1454,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[37,42,38,22],"tags":[34],"class_list":["post-1443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-desarrollo-web","category-frontend","category-react","tag-front-end"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React) - CODEvolution<\/title>\n<meta name=\"description\" content=\"Te muestro c\u00f3mo cerrar el men\u00fa de un navbar de Bootstrap al hacer clic en un link en un componente de React de forma sencilla.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React) - CODEvolution\" \/>\n<meta property=\"og:description\" content=\"Te muestro c\u00f3mo cerrar el men\u00fa de un navbar de Bootstrap al hacer clic en un link en un componente de React de forma sencilla.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\" \/>\n<meta property=\"og:site_name\" content=\"CODEvolution\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-09T12:27:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T04:52:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"950\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marta Fag\u00fandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marta Fag\u00fandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\"},\"author\":{\"name\":\"Marta Fag\u00fandez\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"headline\":\"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React)\",\"datePublished\":\"2024-07-09T12:27:38+00:00\",\"dateModified\":\"2024-11-20T04:52:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\"},\"wordCount\":270,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg\",\"keywords\":[\"Front End\"],\"articleSection\":[\"Bootstrap\",\"Desarrollo Web\",\"Front End\",\"React\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\",\"name\":\"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React) - CODEvolution\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg\",\"datePublished\":\"2024-07-09T12:27:38+00:00\",\"dateModified\":\"2024-11-20T04:52:11+00:00\",\"description\":\"Te muestro c\u00f3mo cerrar el men\u00fa de un navbar de Bootstrap al hacer clic en un link en un componente de React de forma sencilla.\",\"breadcrumb\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg\",\"width\":950,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/martafagundez.com\/codevolution\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/\",\"name\":\"CODEvolution\",\"description\":\"Blog de Marta Fag\u00fandez\",\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\",\"name\":\"Marta Fag\u00fandez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"width\":603,\"height\":603,\"caption\":\"Marta Fag\u00fandez\"},\"logo\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\"},\"description\":\"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)\",\"sameAs\":[\"https:\/\/martafagundez.com\",\"https:\/\/www.linkedin.com\/in\/martafagundezrodriguez\",\"https:\/\/www.youtube.com\/@martafagundez\"],\"url\":\"https:\/\/martafagundez.com\/codevolution\/author\/marta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React) - CODEvolution","description":"Te muestro c\u00f3mo cerrar el men\u00fa de un navbar de Bootstrap al hacer clic en un link en un componente de React de forma sencilla.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/","og_locale":"es_ES","og_type":"article","og_title":"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React) - CODEvolution","og_description":"Te muestro c\u00f3mo cerrar el men\u00fa de un navbar de Bootstrap al hacer clic en un link en un componente de React de forma sencilla.","og_url":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/","og_site_name":"CODEvolution","article_published_time":"2024-07-09T12:27:38+00:00","article_modified_time":"2024-11-20T04:52:11+00:00","og_image":[{"width":950,"height":500,"url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg","type":"image\/jpeg"}],"author":"Marta Fag\u00fandez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marta Fag\u00fandez","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#article","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/"},"author":{"name":"Marta Fag\u00fandez","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"headline":"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React)","datePublished":"2024-07-09T12:27:38+00:00","dateModified":"2024-11-20T04:52:11+00:00","mainEntityOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/"},"wordCount":270,"commentCount":0,"publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg","keywords":["Front End"],"articleSection":["Bootstrap","Desarrollo Web","Front End","React"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/","url":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/","name":"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React) - CODEvolution","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg","datePublished":"2024-07-09T12:27:38+00:00","dateModified":"2024-11-20T04:52:11+00:00","description":"Te muestro c\u00f3mo cerrar el men\u00fa de un navbar de Bootstrap al hacer clic en un link en un componente de React de forma sencilla.","breadcrumb":{"@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#primaryimage","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg","width":950,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/martafagundez.com\/codevolution\/cerrar-navbar-de-bootstrap-al-hacer-clic-en-un-link-en-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martafagundez.com\/codevolution\/"},{"@type":"ListItem","position":2,"name":"Cerrar Navbar de Bootstrap al Hacer Clic en un Link (en React)"}]},{"@type":"WebSite","@id":"https:\/\/martafagundez.com\/codevolution\/#website","url":"https:\/\/martafagundez.com\/codevolution\/","name":"CODEvolution","description":"Blog de Marta Fag\u00fandez","publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1","name":"Marta Fag\u00fandez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","width":603,"height":603,"caption":"Marta Fag\u00fandez"},"logo":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/"},"description":"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)","sameAs":["https:\/\/martafagundez.com","https:\/\/www.linkedin.com\/in\/martafagundezrodriguez","https:\/\/www.youtube.com\/@martafagundez"],"url":"https:\/\/martafagundez.com\/codevolution\/author\/marta\/"}]}},"jetpack_featured_media_url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/07\/cerrar_el_menu_de_un_navbar_de_bootstrap_al_hacer_clic_en_link.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/comments?post=1443"}],"version-history":[{"count":14,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1443\/revisions"}],"predecessor-version":[{"id":1460,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1443\/revisions\/1460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media\/1454"}],"wp:attachment":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media?parent=1443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/categories?post=1443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/tags?post=1443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}