es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo obtener la ruta del subcomponente con react router v6?

02 Aug, 2023 Programación

Así es como estoy usando el gancho useLocation y para el efecto de transición de página.

const App = () => {
  <routes>
    <route path="/" element=""></route><layout></layout>}>
      <route index="" element=""></route><welcome></welcome>}/>
      <route path="blog" element=""></route><blog></blog>}/>
      <route path="team" element=""></route><team></team>}>
        <route index="" element=""></route><teamlist></teamlist>}/>
        <route path="sales" element=""></route><teamsales></teamsales>}/>
        <route path="marketing" element=""></route><teammarketing></teammarketing>}/>

      <route path="about" element=""></route><about></about>}/>

  </routes>
}

const Layout = () => {
  const { pathname } = useLocation();
  return (
    <box>
      <nav></nav>
      <fade key="{pathname?.split('/')[1]}" in="">
        <outlet></outlet>
      </fade>
    </box>
  );
};

const Team = () => {
  const { pathname } = useLocation();
  return (
    <box>
      <teamcommon></teamcommon>
      <fade key="{pathname?.split('/')[2]}" in="">
        <outlet></outlet>
      </fade>
    </box>
  );
};

El propósito de useLocation es crear una nueva key para <fade></fade> y de esa manera reiniciar el efecto de transición cada vez que la página cambie.

¿Hay una mejor manera de hacer esto?

Alternativamente, ¿cómo se crea un gancho como useChildRoutePath(), que devuelve la ruta actual del hijo?

El objetivo es simplificar el código de esta manera:

const Layout = () => {
  const path = useChildRoutePath(); //Valores posibles: /, blog, team, about
  return (
    <box>
      <nav></nav>
      <fade key="{path}" in="">
        <outlet></outlet>
      </fade>
    </box>
  );
};

const Team = () => {
  const path = useChildRoutePath(); //Valores posibles: /, sales, marketing
  return (
    <box>
      <teamcommon></teamcommon>
      <fade key="{path}" in="">
        <outlet></outlet>
      </fade>
    </box>
  );
};

(Box y Fade son componentes de chakra-ui)

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Usando useLocation y <fade></fade> para el efecto de transición de página

    En el código dado, el hook useLocation se utiliza para obtener el objeto de ubicación actual. La propiedad pathname del objeto de ubicación se utiliza para crear una nueva key para el componente Fade. Como resultado, cada vez que la página cambia, se genera una nueva key y el componente Fade se vuelve a renderizar, reiniciando el efecto de transición.

    Si bien esto funciona, puede que no sea la forma más eficiente de lograr el resultado deseado. Una alternativa puede ser crear un hook personalizado useChildRoutePath que devuelva la ruta de la subruta actual. Esto puede simplificar el código en los componentes Layout y Team.

    Creación del hook useChildRoutePath

    Aquí tienes un ejemplo de implementación del hook useChildRoutePath:

    import { useLocation, useRouteMatch } from 'react-router-dom';

const useChildRoutePath = () => {
  const { pathname } = useLocation();
  const match = useRouteMatch(pathname + '/*');

  return match ? match.url.slice(pathname.length) : '/';
};

    Este hook primero obtiene el pathname actual utilizando el hook useLocation. Luego, utiliza el hook useRouteMatch para hacer coincidir el pathname actual con sus rutas de subruta. Si hay una coincidencia, extrae la ruta de la subruta (sin incluir la ruta principal) utilizando el método slice. De lo contrario, devuelve '/' como valor predeterminado.

    Uso del hook useChildRoutePath

    Así es como se puede utilizar el hook useChildRoutePath en los componentes Layout y Team:

    import { useChildRoutePath } from './hooks';

const Layout = () => {
  const path = useChildRoutePath();
  return (
    <box>
      <nav></nav>
      <fade key="{path}" in="">
        <outlet></outlet>
      </fade>
    </box>
  );
};

const Team = () => {
  const path = useChildRoutePath();
  return (
    <box>
      <teamcommon></teamcommon>
      <fade key="{path}" in="">
        <outlet></outlet>
      </fade>
    </box>
  );
};

    En lugar de usar pathname para crear una nueva key para Fade, se utiliza el hook useChildRoutePath para obtener la ruta de la subruta actual. Este valor se utiliza luego para crear una nueva key para Fade, reiniciando el efecto de transición cada vez que la ruta de la subruta cambia.

    El uso del hook useChildRoutePath puede simplificar el código y hacerlo más eficiente.

Comments are closed.