Front-end framework: routing

The route table of a single-page application: path to component, parameters, nested routes, not-found page, navigation through the History API, access guard and lazy loading.

27 cards
6 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link
The steps
Scenarios
Understand

A few cards from the deck

Client-side routing: what is it?
Show the answer
Choosing which component to display from the address, done by the script in the browser without asking the server for a new page.
The script intercepts the click on a link, changes the address and replaces part of the screen: the page does not reload.
With this table, which route is chosen for the address /produits/42?

```js
const routes = [
{ path: "/", component: Accueil },
{ path: "/produits", component: Liste },
{ path: "/produits/:id", component: Fiche },
{ path: "*", component: Introuvable },
];
`
- /produits/:id, with id equal to "42"
- /produits, with 42 ignored
- *, since 42 itself is not a declared route
- /, the default route
Show the answer
/produits/:id, with id equal to "42"
The path must match in full: /produits does not cover /produits/42. :id captures the segment, always as text. The * catch-all is only for when nothing else fits.
In the History API, … adds an entry to the history stack, whereas … replaces the current entry.
Show the answer
In the History API, pushState adds an entry to the history stack, whereas replaceState replaces the current entry.
Neither loads the page: they only change the address and the history. After replaceState, going back skips the old address.
Route: what is it?
Show the answer
An association, in the routing table, between a path pattern and the component to display when the address matches it.
The pattern /produits/:id matches /produits/42 and /produits/7: :id is a parameter, read in the component.
A click on an internal link in the router: which step comes after "The router intercepts the click and cancels the default navigation"?
- It calls pushState to change the address with no page request
- It compares the address with the route table and picks the route
- It mounts the route's component, which requests its data
- The back button, later, fires popstate and the cycle starts again
Show the answer
It calls pushState to change the address with no page request
The order matters: the address changes before display, and the browser's back goes through popstate because the script, this time, did not call pushState.

Study this deck