jasonaden

Upgrade React Router to v6

React Router recently made a major shift with the v6 router. There are some key improvements we want to take advantage of. Some of these include:

• More intelligent routing, not relying on the exact prop or the order of the route definitions.
• Relative routes and linking. No more parent route paths for nested routes.
• New Outlet component, allowing us to decide where to render child routes.
• Smaller bundle sizes
• Suspense-aware navigation using the new navigate function (rather than using history API in v5)
• In the most current versions of React Router, a new set of data-enabled APIs have been added, giving us access to functionality like pre-route loading, route-level form handling, and better route error handling.

jasonaden

{
  "version": 2,
  "tree": {
    "name": "root",
    "children": [
      {
        "name": "assets/index-625bb411.js",
        "children": [
          {
            "name": "src",

jasonaden

• When restoring state, restore the full state rather than just the navigationId.
  • Can this cause a problem?
  • Talk to Igor about this possibly breaking change. Might need to only restore state when there is a navigationId present so the types don't cause a breakage.
  • feat(router): restore whole state object when navigating back to a page managed by Angular router
• Allow passing of state to navigate and navigateByUrl.
• Merge this state with navigationId when applicable. Find where we are setting navigationId as I think it is there on every navigation as currently implemented.
  • feat(router): allow passing state to navigate and navigateById methods
• Allow state to be set for routerLink directives
  • feat(router): allow passing state to routerLink directives
• Wire in state to all events.

jasonaden

/*
 * The first piece is to add an option to RunGuardsAndResolvers that ignores optional params.
 * With this option enabled, we would only run guards and resolvers for required params,
 * ignoring optionals (matrix and query params).
 */

export type RunGuardsAndResolvers = 'paramsChange' | 'paramsOrQueryParamsChange' | 'always' | 
  'pathParamsChange'; // last option is new

// With the above option, we should see these tests pass:

jasonaden

/*
 * Guards execute in a similar way to how they used to. However, there is now prioritization involved. A guard
 * closest to the root of the application takes priority, such that if guards for child routes return `false` 
 * or a `UrlTree` but parents haven't resolved yet, we will wait for the parents to resolve first. The highest
 * prioirty failure (either `false` or `UrlTree` redirect) will take priority.
 * 
 * If a `UrlTree` is returned from a guard, the current navigation will be cancelled (firing a `NavigationCancel`
 * event) and a new navigation will be kicked off to the redirected URL.
 */

jasonaden

// Existing API
export interface NavigationExtras {
  relativeTo?: ActivatedRoute|null;
  queryParams?: Params|null;
  fragment?: string;
  preserveQueryParams?: boolean;
  queryParamsHandling?: QueryParamsHandling|null;
  preserveFragment?: boolean;
  skipLocationChange?: boolean;

jasonaden

/**
 * Currently most people run guards in this way, with redirects happening inside the guard itself.
 * There are a few issues with this, but one is that guards run asynchronously. So if multiple
 * `CanActivate` guards perform a redirect, there isn't a way to guarantee the sequence and 
 * therefore difficult to guarantee what page the user will land on.
 *
 * NOTE: Guards run async, but all CanDeactivate guards will run before CanActivate
 */

// Simple async auth guard

jasonaden

I looked at the issue on the weekend, but wanted to think more about it to see how it should be done and to put together real examples.

These are my thoughts.


## Observation 1: We need tot know when app is atable

To be able to restore scrolling position, we need to know when the application is stable. This cannot be known in a general fashion, it is only known in the context of a particular application.

To illustrate why this is the case, let's try to define stability.

jasonaden

Proposed Roadmap

Overall vision for this year with Angular Router is to: a) stabilize the router we have, and b) implement a new router to achieve treeshakability, lazy loading, and ease of use.

v6

We want to land key features to help incentivize upgrade to v6. Additionally, there are critical bug fixes that are best suited for a major release due to the possibility of unforseen edge cases causing minor breaking changes.

v6.0.0-beta.3

jasonaden

Sample Packaging Application

This app was put together to show how to create and distribute an Angular library. It corresponds with the talk given at the Angular Mountain View Meetup (video here).

The steps below correspond to commits in this repo (after initial setup) so you should be able to refer to the individual commits to see the changes made.

Steps

Step 0: