0
310
VistasReact Routger v6: compruebe si el elemento secundario está activo/<Outlet/> ¿devolvería un componente?
Buen día, ¿Podría ayudarme con respecto a mi problema con el elemento anidado de react-router v6, específicamente, el elemento secundario?
Digamos que tengo esta ruta
<Routes> <Route path="customer" element={<CustomerIndex />} > <Route path=":customeId" element={<CustomerDetail />} /> <Route path="create" element={<CustomerForm />} /> </Route> </Routes>Y el componente "CustomerIndex"
function CustomerPage(){ const {customerId} = useParams(); return ( <> //.....Bla bla bla index table etc etc etc end of thinking capacity <ComponentToDisplayModal display={Boolean(customerId)} > <Outlet /> </ComponentToDisplayModal> </> ); }Ahora, si voy a "/customer/3", CustomerIndex mostraría el componente modal (display=true) y porque la constante "customerId" está definida por useParams
Pero si quisiera mostrar el componente "CustomerForm" navegando a "/customer/create", por supuesto, el 'ComponentToDisplayModal" no se mostraría porque el ID del cliente es nulo.
Entonces, por supuesto, me gustaría tener esto en su lugar.
const display = Boolean(customerId) || isAnyChildPath; ..... <ComponentToDisplayModal {...{display}}>Ahora, ¿cómo podría establecer la constante "isAnyChildPath" en "VERDADERO" si la ruta es "/cliente/*", y "FALSO" si la ruta es "/cliente", o tal vez, verificar si devolvería un componente (por ejemplo, "/ cliente/crear", "/cliente/4"), o no ("/cliente")?
Por ahora, solo uso el método manual de
const location = useLocation(); const display = Boolean(customerId) || location.pathname === "/customer/create"Pero me gustaría saber si existe un método más elegante, en caso de que necesite agregar varios otros niños estáticos en el futuro.
Muchísimas gracias.
1 Respuestas
Responde la pregunta0
Creo que podría simplificar un poco la verificación de la ruta secundaria usando el useMatch y verifique si la ruta actual coincide con cualquiera de las rutas secundarias en lugar de probarla con cualquier parámetro de ruta de ruta.
declare function useMatch<ParamKey extends string = string>( pattern: PathPattern | string ): PathMatch<ParamKey> | null;Devuelve datos coincidentes sobre una ruta en la ruta dada en relación con la ubicación actual.
La idea es que cuando la ruta coincida, se devuelva un objeto de coincidencia definido; de lo contrario, se devolverá un null para las no coincidencias.
"/customer/:path" puede coincidir tanto con "/customer/:id" como con "/customer/create" .
Ejemplo:
function CustomerPage(){ const isMatch = useMatch("/customer/:path"); return ( <> //.....Bla bla bla index table etc etc etc end of thinking capacity <ComponentToDisplayModal display={Boolean(isMatch)} > <Outlet /> </ComponentToDisplayModal> </> ); } 