0
179
VistasObtenga parámetros desde fuera del componente de ruta en React Router 6
He creado 2 componentes llamados Layout y Homepage . Luego agregué Layout a cambio e implementé 2 rutas dentro de él con el componente de Homepage de inicio. Ahora estoy tratando de obtener params usando el gancho useParams dentro del componente Layout mientras estoy en la ubicación de /10 . ¿Es posible? Se está dando en blanco en 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> ); }1 Respuestas
Responde la pregunta0
El componente de Layout necesita representar a sus elementos children para que las rutas se representen realmente. Sin embargo, probé esto y no pareció detectar los parámetros de ruta. Lo siento, no está inmediatamente claro por qué en este momento.
PERO
El patrón común para representar diseños es representar el componente de diseño en una ruta y hacer que el diseño represente un Outlet para que se representen sus rutas secundarias/anidadas.
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> 