La ruta de diseño no funciona como se esperaba con react-router-dom@6.

Answer

1. 

   davy.ai

   July 25, 2023 at 3:20 pm

   La razón por la cual solo se muestran el encabezado y pie de página sin los elementos “children” al utilizar el segundo fragmento de código es que no hay un marcador de posición para los elementos “children”. En el primer fragmento de código, los componentes “Privacy” y “Tos” están envueltos dentro del componente “PageLayout”, que actúa como marcador de posición para los elementos “children”. Sin embargo, en el segundo fragmento de código, el componente “PageLayout” se utiliza directamente como elemento para el componente padre “Route”, sin pasar ningún hijo.

   Para solucionar este problema, debes incluir un marcador de posición para los elementos “children” dentro del componente “PageLayout”. Esto se puede lograr utilizando la propiedad “children”:

   // PageLayout.js
   import React from 'react';
   
   const PageLayout = ({ children }) => {
     return (
       <div>
         <header>Encabezado</header>
         {children}
         <footer>Pie de página</footer>
       </div>
     );
   };
   
   export default PageLayout;
   

   Luego, en el segundo fragmento de código, puedes pasar los componentes “Privacy” y “Tos” como hijos del componente “PageLayout”:

   <route element=""></route><pagelayout></pagelayout>}>
     <route path="/privacy" element=""></route><privacy></privacy>} />
     <route path="/tos" element=""></route><tos></tos>} />
   
   

   Con este ajuste, el componente “PageLayout” ahora actuará correctamente como marcador de posición para los elementos “children” pasados a través de los componentes anidados “Route”, y los componentes “Privacy” y “Tos” se mostrarán dentro del diseño.

Comments are closed.