Técnica que permite vincular una URL específica a una vista interna profunda de la aplicación.
En el contexto de pestañas (tabs), sincroniza la navegación con el historial del navegador o del dispositivo, permitiendo que el botón "atrás" regrese a la pestaña anterior en lugar de cerrar la aplicación.
// Deep Linking con React Router import { useSearchParams, useNavigate } from 'react-router-dom'; function TabsConHistorial() { const [searchParams, setSearchParams] = useSearchParams(); const tabActual = searchParams.get('tab') || 'general'; const cambiarTab = (nuevaTab) => { // Actualiza la URL sin recargar la página setSearchParams({ tab: nuevaTab }); // URL resultante: /configuracion?tab=seguridad }; return ( <div> <nav> <button onClick={() => cambiarTab('general')} className={tabActual === 'general' ? 'active' : ''} > General </button> <button onClick={() => cambiarTab('seguridad')} className={tabActual === 'seguridad' ? 'active' : ''} > Seguridad </button> <button onClick={() => cambiarTab('notificaciones')} className={tabActual === 'notificaciones' ? 'active' : ''} > Notificaciones </button> </nav> {/* El botón atrás del navegador funciona correctamente */} {tabActual === 'general' && <TabGeneral />} {tabActual === 'seguridad' && <TabSeguridad />} {tabActual === 'notificaciones' && <TabNotificaciones />} </div> ); } // Deep Linking en React Native import { Linking } from 'react-native'; // Configurar esquema de URL: miapp://producto/123 const linking = { prefixes: ['miapp://', 'https://miapp.com'], config: { screens: { Home: '', Producto: 'producto/:id', Perfil: 'perfil' } } };
