@composi/router:

• Instalación
• Usage

Router

Enrutador para los Componentes

@composi/router es un enrutador del cliente basado en hash para aplicaciones de una sola página (SPA). Esto es para aquellas ocasiones en las que deseas renderizar condicionalmente un conjunto de subcomponentes según el URL. Esto funciona correctamente con el botón de retroceso del navegador y puede usarlo con la API de historia. @composi/router es muy simple con solo algunas opciones. Si necesitas un enrutador más avanzado, considera Universal Router. O usa el enrutador que prefieras.

Definir las Rutas

El siguiente ejemplo muestra cómo configurar las rutas. Lo que hagas cuando pasa la ruta depende completamente de ti:

import { h, render } from '@composi/core'
import { Router } from '@composi/router'

// Crear instancia de Router:
const router = Router()

// Definir las rutas que usar:
router(
  {
    path: "/",
    action: () => {
      // Haz algo cuando la página pricipal se carga.
    }
  },
  {
    path: "/about",
    action: () => {
      // Cargar el componente "About"
    }
  },
  {
    // Captar la id del parámetro:
    path: "/usuarios/:nombre",
    action: (nombre) => {
      if (nombre === 'jose') alert('Hi, José!')
      else console.log(nombre)
    }
  }
)

Normalmente usarías una ruta para manejar la carga de un componente. La forma más fácil de hacer esto es usar un componente funcional:

import { h, render } from '@composi/core'
import { Router } from '@composi/router'

const router = Router()

const Home = <h1>Legaste a casa</h1>
const PrimeraPágina = <h1>¡Bienvendio a la Primera Página!</h1>
const SegundaPágina = <h1>Esta es la Segunda Página.</h1>

function Menu(props, hijo) {
  return (
    <div>
      <ul class='menu'>
        <li><a href="#/">Home</a></li>
        <li><a href="#/first">Primera Página</a></li>
        <li><a href="#/second">Segunda Página</a></li>
      </ul>
      {
        hijo
      }
    </div>
  )
}

function renderizarPágina(component) {
  render(<Menu>{component}</Menu>, 'section')
}

router(
  {
    path: '/',
    action: () => renderizarPágina(Home)
  },
  {
    path: '/primero',
    action: () => renderizarPágina(PrimeraPágina)
  },
  {
    path: '/segundo',
    action: () => renderizarPágina(SegundaPágina)
  },
  {
    path: '/*',
    action: () => {
      console.log('Esta no es una ruta correcta.')
    }
  }
)

render(<Menu>{Home}</Menu>, 'section')

Este es un ejemplo en Codepen de cómo usar las rutas:

See the Pen @composi/core Router es by Robert Biggs (@rbiggs) on CodePen.

También puedse utilizar rutas junto con @composi/datastore. La ruta establecería un valor en el dataStore, lo que causaría que el componente se actualice.

Enrutador con Entorno de Ejecución

El entorno de ejecución expone su método interno send como una función estática con el fin de enviar mensajes a las acciones de update en el objeto de programa. Usando esto, puedes enviar mensajes de una acción de ruta a una acción de programa. Harías esto para determinar el estado que se devolvería, que entonces actualizaría la vista según la ruta que se cargó. A continuación se muestra un ejemplo de Codepen de cómo hacer esto.

See the Pen @composi/core Router with runtime by Robert Biggs (@rbiggs) on CodePen.

Gestores Múltiples para una Ruta

Puedes utilizar más de un gestor para una ruta. Tal vez necesitas hacer eso para eliminar algunas funcionalidades en adelante. Si ese es el caso, debes usar gestores con nombre para cualquier gestor que desee eliminar:

// Gestor que se va eliminar más tarde:
const gestorTemporal = () => {
  console.log('Este gestor es temporario y será eliminado.')
}
router(
  {
    path: '/',
    action: () => console.log('¡Estás en casa!')
  },
  {
    path: '/',
    // Esta ruta será eliminado después de un tiempo.
    action: gestorTemporal
  }
)

Para apreder cómo eliminar una ruta o gestor, examina Eliminar una Ruta

Parámetros Opcionales

Puedes indicar que un parámetro es opcioinal por usar el carácter ? después de él:

router({
  path: 'usuarios/:nombre?',
  action: function(nombre) {
    if (nombre) {
      console.log(nombre)
    } else {
      console.log('No se encontró ningún nombre.')
    }
  }
})
router.navigate('usuarios/') // Registra `No se encontró ningún nombre.`
router.navigate('usuarios/julio') // logs `julio`

Comodín

El uso de * captará cualquier ruta que no coincida con las rutas previamente definidas. Usa este como comodín para las rutas inesperadas o para 404:

router.navigate('usuarios/*', function() {
console.log('¡Captó ruta inesperada!')
})
router.navigate('usuarios/12312312')

Boquear una Ruta

Puedes bloquear una ruta por devolver false:

router({
  path:'/admin',
  action: function() {
    return false
  }
})

Eliminar Todas las Rutas y sus Gestores

Si quieres eliminar todas las rutas actuales y sus gestores, solo tienes que ejectuar lo siguiente:

router.removeAll()

Después de eso, ninguna de las rutas funcionará.

Eliminar una sola Ruta

Puedes eliminar una ruta singular como sigue:

// Gestor para eliminar más tarde:
const gestorTemporal = () => {
  console.log('Este gestor es temporario y será eliminado.')
}
router(
  {
    path: '/',
    action: () => console.log('¡Estás en casa!')
  },
  {
    path: '/',
    action: () => gestorTemporal
  }
)

// Después de un tiempo eliminamos la ruta con su gestor:
router.remove('/', gestorTemporal)