Skip to content

docs(router): clarify relative navigation note with example#67437

Open
anushkasingh-commits wants to merge 5 commits intoangular:mainfrom
anushkasingh-commits:patch-3
Open

docs(router): clarify relative navigation note with example#67437
anushkasingh-commits wants to merge 5 commits intoangular:mainfrom
anushkasingh-commits:patch-3

Conversation

@anushkasingh-commits
Copy link
Contributor

Adds a clarification explaining how command arrays passed to router.navigate() are interpreted during relative navigation.

Includes an example showing how ['..'] resolves relative to the current route.

This addresses reviewer feedback requesting a concrete example instead of a descriptive paragraph.

Scope:

  • Documentation only
  • No behavioral changes

@pullapprove pullapprove bot requested a review from AndrewKushnir March 4, 2026 15:46
@angular-robot angular-robot bot added area: docs Related to the documentation area: router labels Mar 4, 2026
@ngbot ngbot bot added this to the Backlog milestone Mar 4, 2026
@AndrewKushnir AndrewKushnir requested review from atscott and removed request for AndrewKushnir March 4, 2026 17:28
// To: /users
this.router.navigate(['..'], {relativeTo: this.route});

This moves one level up in the route tree. Splitting traversal across multiple array entries (for example `['..', 'child']`) may not behave as expected.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still isn't really reading clear to me. What are you trying to say here? What does "may not behave as expected" mean? To me, it behaves exactly as expected. I think you're trying to say the array is not separate navigations, first to '..', then to 'child'? If that's the case, then what we really need here is an example of where ['..', 'child'] goes:

// From: /users/123
// To: /users/list
this.router.navigate(['..', 'list'], {relativeTo: this.route});

@anushkasingh-commits
Copy link
Contributor Author

Thanks for the suggestion! I've updated the note and added a clearer example showing how the command array resolves relative to the current route.

// Result: /users/list
this.router.navigate(['..', 'list'], { relativeTo: this.route });

The commands array is interpreted as a single navigation path relative to the current route.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sentence seem slightly redundant.

}
```

NOTE: When using `router.navigate()` with a commands array and `relativeTo`, Angular resolves the commands as a single navigation path.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move this to be just another example above?

 // Angular resolves the commands array as a single navigation path relative to the given route
 navigateToList() {
    // From: /users/123
    // Result: /users/list
    this.router.navigate(['..', 'list'], { relativeTo: this.route });
  }

@anushkasingh-commits
Copy link
Contributor Author

Thanks for the suggestion! I've simplified the section and turned it into an example as suggested.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Related to the documentation area: router

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants