Obtener parámetros de fuera de ruta componente en Reaccionar Router 6

Question 1

He creado 2 componentes denominados Layout y Homepage. Luego he añadido Layout en retorno y aplicar 2 de la ruta en su interior con Homepage componente. Ahora estoy tratando de conseguir params por useParams gancho dentro de la Layout componente mientras estoy en la ubicación de /10. Es posible? Se está dando en blanco a mi lado.

App.js

const App = () => {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/:id" element={<Homepage />} />
      </Routes>
    </Layout>
  );
}

Layout.js

import { useParams } from "react-router-dom";

const Layout = () => {
  const params = useParams();
  console.log(params);
  return(
    <div>
      Hello World
    </div>
  );
}

Question 2

Layout componente necesita procesar sus children así que las rutas son realmente prestados. He intentado esto, y aunque no parece recoger en la ruta de parámetros. Lo siento, no es inmediatamente claro por qué en este momento.

PERO

El patrón común para la representación de los diseños es hacer el diseño de un componente en una ruta y el diseño hacen que un Outlet para sus hijos/rutas anidadas a ser prestados en.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Rutas

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Drew Reese · Answer 1 · 2021-11-23T21:10:32

Layout componente necesita procesar sus children así que las rutas son realmente prestados. He intentado esto, y aunque no parece recoger en la ruta de parámetros. Lo siento, no es inmediatamente claro por qué en este momento.

PERO

El patrón común para la representación de los diseños es hacer el diseño de un componente en una ruta y el diseño hacen que un Outlet para sus hijos/rutas anidadas a ser prestados en.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Rutas

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Obtener parámetros de fuera de ruta componente en Reaccionar Router 6

Pregunta

Mejor respuesta

PERO

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría