Soluciones para renderizar un encabezado diferente para uno de mis componentes en React.

29 Jul, 2023 Programación 0

Estoy creando una aplicación web que tiene un encabezado principal válido para todas sus páginas y un segundo encabezado que debería ser diferente únicamente en la página de inicio. Para ser específico, el encabezado principal es solo el título de la aplicación y el botón de inicio de sesión/perfil del usuario, y el segundo encabezado muestra algunos enlaces. Ahora aquí está el problema: la página de inicio tiene un cuadro de búsqueda justo en el medio, un poco como la página inicial de Google, mientras que en las otras páginas este cuadro de búsqueda se mueve al segundo encabezado, justo al lado de los enlaces que ya están ahí.

La primera solución que intenté fue usar useParams para obtener la URL de la página de inicio y hacer una representación condicional para el cuadro de búsqueda en el segundo encabezado, así:

params !== "Inicio" && <searchbox></searchbox>

Pero no funcionó y no pude entender por qué. useParams está devolviendo “undefined”, por lo que no puedo hacer mucho con eso. Luego empecé a pensar en otras soluciones, como crear un div dentro de mi enrutador en App y agregar el segundo encabezado allí, mientras que “Inicio” se mantiene fuera, más o menos así:

return (
    <>
        <router>
            <header></header>
            <wrapper>
                <routes>
                    <route exact="" path="/" element=""></route><start></start>} />
                </routes>
                <div>
                    <secondheader>
                        <sidebar></sidebar>
                        <searchbox></searchbox>
                    </secondheader>
                    <routes>
                        [OTRAS RUTAS]
                    </routes>
                </div>
            </wrapper>
        </router>

);

Esto tampoco funcionó y creo que era de esperarse, pero intenté de todos modos. Aparte de eso, hasta donde sé, ¿no puedo tener dos enrutadores, verdad? Como uno en App, y otro en Home, por ejemplo, de manera que Home sea tanto el hermano de “Inicio” como el padre de las demás páginas. Esto no es posible, ¿verdad?

En este punto, supongo que renderizado condicional es mi mejor opción, pero no está funcionando. ¿Qué me sugieren hacer?

davy.ai

July 29, 2023 at 8:46 am

Para resolver este problema, puedes utilizar el renderizado condicional en tu componente de encabezado (Header). Primero, podrías crear una propiedad (prop) para tu componente de encabezado llamada “isStartPage”, que se establece como verdadera solo para la página de inicio. Luego, dentro del componente de encabezado, utiliza esta propiedad (prop) para renderizar condicionalmente el cuadro de búsqueda en el segundo encabezado solo si “isStartPage” es verdadera. Aquí tienes un ejemplo:

function Header(props) {
  return (
    <div>
      <h1>Título de la aplicación</h1>
      <button>Iniciar sesión/Perfil de usuario</button>
      {props.isStartPage && <searchbox></searchbox>}
      <secondheader links="{props.links}"></secondheader>
    </div>
  );
}

Luego, para la página de inicio, pasa la propiedad (prop) “isStartPage” al componente de encabezado:

function StartPage() {
  return (
    <div>
      <header isstartpage="{true}"></header>
      <searchbox></searchbox>
      {/* otro contenido de la página de inicio */}
    </div>
  );
}

Para todas las demás páginas, simplemente pasa “false” como el valor de la propiedad (prop) “isStartPage”:

function OtherPage() {
  return (
    <div>
      <header isstartpage="{false}" links="{someLinks}"></header>
      {/* otro contenido de la página */}
    </div>
  );
}

De esta manera, el cuadro de búsqueda solo aparecerá en el segundo encabezado para la página de inicio, y en todas las demás páginas aparecerá junto a los demás enlaces.

Answer

davy.ai

July 29, 2023 at 8:46 am
Para resolver este problema, puedes utilizar el renderizado condicional en tu componente de encabezado (Header). Primero, podrías crear una propiedad (prop) para tu componente de encabezado llamada “isStartPage”, que se establece como verdadera solo para la página de inicio. Luego, dentro del componente de encabezado, utiliza esta propiedad (prop) para renderizar condicionalmente el cuadro de búsqueda en el segundo encabezado solo si “isStartPage” es verdadera. Aquí tienes un ejemplo:
```
function Header(props) {
  return (
    <div>
      <h1>Título de la aplicación</h1>
      <button>Iniciar sesión/Perfil de usuario</button>
      {props.isStartPage && <searchbox></searchbox>}
      <secondheader links="{props.links}"></secondheader>
    </div>
  );
}
```
Luego, para la página de inicio, pasa la propiedad (prop) “isStartPage” al componente de encabezado:
```
function StartPage() {
  return (
    <div>
      <header isstartpage="{true}"></header>
      <searchbox></searchbox>
      {/* otro contenido de la página de inicio */}
    </div>
  );
}
```
Para todas las demás páginas, simplemente pasa “false” como el valor de la propiedad (prop) “isStartPage”:
```
function OtherPage() {
  return (
    <div>
      <header isstartpage="{false}" links="{someLinks}"></header>
      {/* otro contenido de la página */}
    </div>
  );
}
```
De esta manera, el cuadro de búsqueda solo aparecerá en el segundo encabezado para la página de inicio, y en todas las demás páginas aparecerá junto a los demás enlaces.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Soluciones para renderizar un encabezado diferente para uno de mis componentes en React.

Answer

davy.ai