Skip to content

Conversation

@atscott
Copy link
Contributor

@atscott atscott commented Dec 2, 2023

This feature adds a property to the NavigationBehaviorOptions that allows developers to define a different path for the browser's address bar than the one used to match routes. This is useful for redirects where you want to keep the browser bar the same as the original attempted navigation but redirect to a different page, such as a 404 or error page.

fixes #17004

@atscott atscott added feature Issue that requests a new feature area: router target: minor This PR is targeted for the next minor release labels Dec 2, 2023
@ngbot ngbot bot modified the milestone: Backlog Dec 2, 2023
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Dec 2, 2023
@atscott atscott force-pushed the differentBrowserUrl branch from f814cfa to 6986a0a Compare December 2, 2023 00:06
@jnizet
Copy link
Contributor

jnizet commented Dec 2, 2023

I had the feeling that the preferred way of redirecting was to return a UrlTree from the guard rather than imperatively navigating from the guard.
How would we get this behavior when returning a UrlTree?

Also, I must say that using UrlTrees is quite confusing, especially for beginners. Common navigations (using routerLink or router.navigate) use strings or arrays of segments to navigate, but in order to redirect, we have to transform the string/array into a UrlTree, which is not intuitive.
Even with the current state of this PR, if the goal is to keep the currently requested URL, couldn't we simply pass a boolean option rather than an UrlTree option?

@atscott
Copy link
Contributor Author

atscott commented Dec 4, 2023

I had the feeling that the preferred way of redirecting was to return a UrlTree from the guard rather than imperatively navigating from the guard.

Yes, redirects should generally go through that mechanism. router.navigate...; return false isn't a true redirect as far as the Router's concerned. It's a new navigation that cancels and supersedes the current one. Redirects with the UrlTree return allow you to keep the original Promise from navigate and not resolving it until the redirect navigation completes. We can track it more directly as an actual redirect and treat it as a direct continuation of the initial navigation.

How would we get this behavior when returning a UrlTree?

It should and will be available, but I didn't feel that this feature needed to be blocked on having that available.

Unfortunately the UrlTree redirects don't provide a way to defined extras and was a design decision at the time (#27148 (comment)). I think it's clear now that this wasn't right and it'll be available in v18 with #45023 (expanding the type is a breaking change).

Also, I must say that using UrlTrees is quite confusing, especially for beginners. Common navigations (using routerLink or router.navigate) use strings or arrays of segments to navigate, but in order to redirect, we have to transform the string/array into a UrlTree, which is not intuitive.

Agreed. There are at least two reasons this PR is still in draft mode and one of them is that I'm not yet decided on the behavior here with urlHandlingStrategy and urlSerializer (that includes string as an option). At the moment, I'm leaning towards not serializing a string and not using UrlHandlingStrategy.merge with the property value. In this way, the browserUrl property can also be used as a way to manually avoid UrlHandlingStrategy behavior.

Even with the current state of this PR, if the goal is to keep the currently requested URL, couldn't we simply pass a boolean option rather than an UrlTree option?

Two things here: It is a goal but I wouldn't say it's necessarily the only goal. The feature as proposed here is a lot more flexible than a boolean and could be used for other use-cases. Additionally, as described above, the router.navigate...; return false; pattern isn't really a redirect. I don't think a boolean directly in the navigation extras that depends on the current router/navigation state (if there is one) is a great API. That said, I do think we could consider a shortcut to getting this behavior with a boolean when RedirectCommand is available since that, by definition, is only working in the context of an actual redirect.

@atscott atscott force-pushed the differentBrowserUrl branch from 6986a0a to 6418b99 Compare December 4, 2023 18:16
@jnizet
Copy link
Contributor

jnizet commented Dec 4, 2023

Thanks for the detailed explanations @atscott

@atscott atscott force-pushed the differentBrowserUrl branch 5 times, most recently from f953fd6 to f12c0fc Compare December 4, 2023 20:06
@atscott atscott force-pushed the differentBrowserUrl branch from f12c0fc to ac71628 Compare March 7, 2024 00:43
@atscott atscott marked this pull request as ready for review March 7, 2024 00:51
@ChristofFritz
Copy link

Thank you so much for building this @atscott ! We'll be using this the second it get's released.

@atscott atscott force-pushed the differentBrowserUrl branch from ac71628 to cd1d524 Compare March 12, 2024 16:50
@pullapprove pullapprove bot requested a review from AndrewKushnir May 3, 2024 23:21
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

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

Reviewed-for: public-api

…hing

This feature adds a property to the `NavigationBehaviorOptions` that
allows developers to define a different path for the browser's address
bar than the one used to match routes. This is useful for redirects
where you want to keep the browser bar the same as the original
attempted navigation but redirect to a different page, such as a 404 or
error page.

fixes angular#17004
@atscott atscott force-pushed the differentBrowserUrl branch from cd1d524 to bb915ac Compare May 30, 2024 20:45
@atscott atscott requested a review from thePunderWoman June 10, 2024 23:21
Copy link
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

reviewed-for: public-api

@atscott atscott self-assigned this Jun 11, 2024
@atscott atscott added the action: merge The PR is ready for merge by the caretaker label Jun 11, 2024
@AndrewKushnir
Copy link
Contributor

This PR was merged into the repository by commit 1d3a752.

The changes were merged into the following branches: main

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: router detected: feature PR contains a feature commit feature Issue that requests a new feature target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Render 404 page with CanActivate guard without aborting navigation

5 participants