Podemos actualizar la URL en JavaScript. Tenemos las API pushState y replaceState:
// Adds to browser history
history.pushState({}, "About Page", "https://css-tricks.com/about");
// Doesn't
history.replaceState({}, "About Page", "https://css-tricks.com/about");JavaScript también es capaz de reemplazar cualquier contenido del DOM.
// Hardcore
document.body.innerHTML = `
<div>New body who dis.</div>
`;Entonces, con esos poderes combinados, podemos construir un sitio web en el que navegamos a diferentes “páginas”, pero el navegador nunca se actualiza. Eso es, literalmente, lo que significa “Aplicación de página única” (SPA).
Pero el enrutamiento puede complicarse un poco. Realmente estamos solos implementándolo fuera de estas API de bajo nivel. Estoy más familiarizado con buscar algo como React Router, que permite la expresión de rutas en JSX. Algo como esto:
<Router>
<Switch>
<Route path="https://css-tricks.com/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/user/:id">
<User id={id} />
</Route>
<Route path="https://css-tricks.com/">
<Home />
</Route>
</Switch>
</Router>Los documentos describen este bit como:
A <Switch> mira a través de sus hijos <Route> y muestra el primero que coincide con la URL actual.
Es un poco como un comparador de RegEx con sutilezas de API, como la capacidad de hacer un “token” con algo como :id que actúa como un comodín que puede pasar a los componentes para usar en consultas y demás.
¡Esto es trabajo! De ahí la razón por la que tenemos bibliotecas para ayudarnos. Pero parece que la plataforma web está haciendo lo que mejor sabe y está interviniendo para ayudar en lo que puede. En el blog de Google webdev, esto se explica en gran medida de la misma manera:
El enrutamiento es una pieza clave de todas las aplicaciones web. En esencia, el enrutamiento implica tomar una URL, aplicarle alguna coincidencia de patrones u otra lógica específica de la aplicación y luego, por lo general, mostrar contenido web en función del resultado. El enrutamiento se puede implementar de varias maneras: a veces es un código que se ejecuta en un servidor que asigna una ruta a los archivos en el disco, o la lógica en una aplicación de una sola página que espera cambios en la ubicación actual y crea una parte correspondiente de DOM para monitor.
Si bien no existe un estándar definitivo, los desarrolladores web se han inclinado hacia una sintaxis común para expresar patrones de enrutamiento de URL que comparten mucho en común con las expresiones regulares, pero con algunas adiciones específicas de dominio como tokens para segmentos de ruta coincidentes.
Jeff Posnick, “URLPattern lleva el enrutamiento a la plataforma web”
¡Nueva tecnología!
const p = new URLPattern({
pathname: '/foo/:image.jpg',
baseURL: 'https://example.com',
});Podemos configurar un patrón como ese y luego ejecutar pruebas contra él disparándole una URL (probablemente la que se navega actualmente):
let result = p.test('https://example.com/foo/cat.jpg');
// true
result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'Creo que el punto de todo esto es quizás poder construir enrutamiento en SPA sin tener que buscar bibliotecas, lo que hace que los sitios web sean más ligeros / rápidos. O que las bibliotecas que nos ayudan con el enrutamiento pueden aprovecharlo, haciendo que las bibliotecas sean más pequeñas y, en última instancia, sitios web más ligeros y rápidos.
Esta no es una tecnología sólida todavía, por lo que probablemente sea mejor leer la publicación del blog para obtener la esencia. Y usa el polyfill si quieres probarlo.
Y hablando de la plataforma web que muestra amor por los SPA últimamente, echa un vistazo a Shared Element Transitions, que parece estar recuperando impulso.