What is PathMatch fully in Angular

What is "Pathmatch: Full" in Angular and what is its effect?

While technically correct, the other answers would benefit from an explanation of URL-to-route matching from Angular. I don't think you can fully understand (excuse the pun) what happens if you don't know how the router works in the first place.


First, let's define some basic things. We'll use this url as an example:.

  1. It might be obvious, but first let's point out that the Query parameters () and fragments () do not play a role in the path comparison . Only the base url () is important.

  2. Angular splits URLs into Segments on . The segments are, of course, and.

  3. The router configuration is a Tree structure with a single root node. Each object is a node, which can have nodes, which in turn can have other or leaf nodes.

The goal of the router is to find a router configuration branch , start at the root node that would fit exactly all (!!!) Segments of the url. That is crucial! If Angular can't find a route configuration branch that might fit whole Url - no more and no less - it won't do Nothing .

For example, if your destination URL is but the router can only either match or match, there will be no match and the application will not render anything.

After all, routes behave with something different from normal routes, and it seems to me that they are the only place anyone really ever wants to use something. But we'll come back to that later.

Standard () path match

The reason for the name is that such a route configuration checks whether the configuration is a prefix of the remaining URL segments. However, the router can only match complete segments which makes this naming a bit confusing.

Let's say this is our root level router configuration:

Note that every single object here uses the standard matching strategy. This strategy means that the router will go through the entire configuration tree and try to get it segment by segment with the destination url to match, until the url completely matches . This is how it would be done for this example:

  1. Iterate through the root array and look for an exact match for the first URL segment.
  2. So skip this branch. Note that we're using an equality check instead of an or - only full segment matches count!
  3. Matches any value, so it's a match. However, the destination url is not yet fully matched (we still need to match and) so the router looks for children.
    • The only child of is, which is therefore not a match.
  4. Angular then returns to the root array and continues from there.
  5. , Skip branch.
  6. - The segment matches. However, this is not yet a complete match, so we need to look for children (as in step 3).
    • , skip it.
    • matches everything, so we have a match for the segment. However, this is still not a full match, so we have to look for a suitable child.
      1. We can see that there is a children's route that gives us a complete match! Thus the application is rendered.

Full match of url ()

example 1

Now imagine that the route configuration object looks like this:

Note the use of. If this were the case, steps 1 through 5 would be the same, but step 6 would be different:

  1. - The segment is right Not because the path configuration with does not match the full URL.
  2. Since there is no match, we'll skip this branch.
  3. At this point we have reached the end of the router configuration without finding a match. The application renders Nothing .

Example 2

What if we had this instead:

So just with matches, it's a mismatch again, and the application doesn't render anything.

Example 3

Let's consider the following:

In this case:

  1. - The segment is the same but remains unsurpassed. Let's look for children.
    • - skip.
    • can only correspond to a single segment what would be. However, it is a route that must match (all of the remaining URL). It can't and so it's not a match (so let's skip this branch)!
  2. Again, we couldn't find a match for the URL and the application renders Nothing .

As you may have noticed, a configuration basically says this:

Ignore my children and only suit me. If I don't all remaining If you can match URL segments yourself, continue.

Redirects

Anyone who has defined a will be matched against the target URL using the same principles. The only difference is that the redirect is applied as soon as a segment matches . This means that if a detour route uses the standard strategy, a partial match is sufficient to cause a redirect . Here is a good example:

For our original URL (), this would happen:

  1. - skip it.
  2. - We have a match.
  3. That match has one that is applied immediately .
  4. The destination URL changes to.
  5. The router starts the synchronization again and immediately finds a synchronization for. The application is being rendered.

Now think about what would happen if the route also had:

  1. - skip it.
  2. would match the first segment of the url, but the route configuration requires a match. So skip them.
  3. Matches . is still not coordinated, but this route has children.
    • We find a match for the children. The entire URL is now matched and the application is rendered.

Empty path ()

The empty path is a special case because it has each segment to match can , without "consuming" it (therefore his children would have to correspond to this segment again). Consider this example:

Let's say we're trying to access:

  • will always match, so the route matches. However, the entire URL was not matched - we still have to match!
  • We can see that there is a child who matches the remaining (and only!) Segment, and we have a complete match. The application is being rendered.

Now back to the original question

The OP used this router configuration:

If we were to navigate to the root url () the router would fix this as follows:

  1. does not match an empty segment, so skip it.
  2. corresponds to the empty segment. It has one, which is also fine since we matched the entire url (it had a single blank segment).
  3. A redirect occurs and the application is rendered.

What if there weren't any?

Actually, you'd expect the whole thing to behave the same way. However, Angular explicitly prevents such a configuration () because if you set this up, it would theoretically create an infinite loop of redirects. So Angular only gives made a mistake which is why the application would not work at all! (https://angular.io/api/router/Route#pathMatch)

This really doesn't make a lot of sense, as Angular has implemented protection against endless redirects - only one redirect is performed per routing level.

What about ?

fits absolutely to everything (is a match) with or without a, so there is no point in using this configuration option.

Since it matches everything, the root path is also included, which is superfluous in this setup.

Funnily enough, it's perfectly fine to have this configuration:

When we navigate, a match will take place and a greeting relay will take place. This should start an endless loop of redirects, but Angular will stop this immediately and it will work fine.