Cómo añadir encabezado y pie de página en algunos componentes específicos no en todos. En Router V6 en React js.

Answer

1. 

   davy.ai

   August 6, 2023 at 6:12 am

   En React Router v6, el componente Route ha sido reemplazado por una nueva sintaxis que usa los componentes Routes y Route. Para excluir el componente Header de la página Login, podemos envolver el componente Routes en un nuevo componente que renderice el Header de forma condicional basado en la ubicación actual.

   import React from 'react';
   import './App.css';
   import Header from './Header';
   import Home from './Home';
   import {BrowserRouter as Router, Routes, Route, useLocation} from "react-router-dom";
   import Checkout from './Checkout';
   import Login from './Login';
   
   function App() {
     return (
       <router>
         <headerwrapper>
           <routes>
             <route exact="" path="/checkout" element=""></route><checkout></checkout>} />
             <route exact="" path="/" element=""></route><home></home>} />
             <route exact="" path="/login" element=""></route><login></login>} />
           </routes>
         </headerwrapper>
       </router>
     );
   }
   
   function HeaderWrapper({children}) {
     const location = useLocation();
     if (location.pathname === '/login') {
       return <>{children};
     } else {
       return (
         <div classname="app">
           <header></header>
           {children}
         </div>
       );
     }
   }
   
   export default App;
   

   Aquí, definimos un nuevo componente HeaderWrapper que verifica la ubicación actual utilizando el hook useLocation. Si la ubicación es /login, el componente HeaderWrapper devuelve solo los hijos (es decir, el componente Login). De lo contrario, renderiza el componente Header y los hijos dentro de un div con la clase app.

   Envolvemos el componente Routes dentro del componente HeaderWrapper y lo pasamos como propiedad children. Esto garantizará que el componente Header se excluya de la página Login, pero se incluya en todas las demás páginas.

   Nota: Esta solución asume que el componente Header solo se usa en este componente Routes, y no en otras partes de la aplicación. Si el componente Header se usa en otras partes de la aplicación, es posible que deba encontrar una solución más genérica para renderizarlo de forma condicional.

Comments are closed.