V15/bugfix/fix route issue from 18859 (#18931)

* unique check

* unique for workspace empty path

* more unique routes

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/external/router-slot/model.ts

@@ -62,6 +62,9 @@ export interface IRouteBase<D = any> {
 	// - If "full" router-slot will try to match the entire path.
 	// - If "fuzzy" router-slot will try to match an arbitrary part of the path.
 	pathMatch?: PathMatch;
+
+	// A unique identifier for the route, used to identify the route so we can avoid re-rendering it.
+	unique?: string | Symbol;
 }
 
 /**

src/Umbraco.Web.UI.Client/src/external/router-slot/router-slot.ts

@@ -208,10 +208,8 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 				// If navigate is not determined, then we will check if we have a route match, and if the new match is different from current. [NL]
 				const newMatch = this.getRouteMatch();
 				if (newMatch) {
-					if (this._routeMatch?.route.path !== newMatch.route.path) {
-						// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
-						navigate = shouldNavigate(this.match, newMatch);
-					}
+					// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
+					navigate = shouldNavigate(this.match, newMatch);
 				}
 			}
 		}

src/Umbraco.Web.UI.Client/src/external/router-slot/util/router.ts

@@ -301,9 +301,10 @@ export function shouldNavigate<D>(currentMatch: IRouteMatch<D> | null, newMatch:
 	const { route: currentRoute, fragments: currentFragments } = currentMatch;
 	const { route: newRoute, fragments: newFragments } = newMatch;
 
-	const isSameRoute = currentRoute == newRoute;
+	const isSameRoute = currentRoute.path == newRoute.path;
 	const isSameFragments = currentFragments.consumed == newFragments.consumed;
+	const isSameBasedOnUnique = currentRoute.unique === newRoute.unique;
 
 	// Only navigate if the URL consumption is new or if the two routes are no longer the same.
-	return !isSameFragments || !isSameRoute;
+	return !isSameFragments || !isSameRoute || !isSameBasedOnUnique;
 }

src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-view.manager.ts

@@ -94,6 +94,7 @@ export class UmbCollectionViewManager extends UmbControllerBase {
 
 			if (routes.length > 0) {
 				routes.push({
+					unique: fallbackView.alias,
 					path: '',
 					component: () => createExtensionElement(fallbackView),
 					setup: () => {

src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts

@@ -95,6 +95,7 @@ export class UmbModalElement extends UmbLitElement {
 			this.#modalRouterElement = document.createElement('umb-router-slot');
 			this.#modalRouterElement.routes = [
 				{
+					unique: '_umbEmptyRoute_',
 					path: '',
 					component: document.createElement('slot'),
 				},

src/Umbraco.Web.UI.Client/src/packages/core/router/components/router-slot/route.context.ts

@@ -60,6 +60,7 @@ export class UmbRouteContext extends UmbContextBase<UmbRouteContext> {
 	#generateRoute(modalRegistration: UmbModalRouteRegistration): UmbRoutePlusModalKey {
 		return {
 			__modalKey: modalRegistration.key,
+			unique: 'umbModalKey_' + modalRegistration.key,
 			path: '/' + modalRegistration.generateModalPath(),
 			component: EmptyDiv,
 			setup: async (component, info) => {
@@ -112,6 +113,7 @@ export class UmbRouteContext extends UmbContextBase<UmbRouteContext> {
 		// Add an empty route, so there is a route for the router to react on when no modals are open.
 		this.#modalRoutes.push({
 			__modalKey: '_empty_',
+			unique: 'umbEmptyModal',
 			path: '',
 			component: EmptyDiv,
 		});

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -70,11 +70,11 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 							(component as any).manifest = manifest;
 						}
 					},
-				} as UmbRoute;
+				};
 			});
 
 			// Duplicate first workspace and use it for the empty path scenario. [NL]
-			newRoutes.push({ ...newRoutes[0], path: '' });
+			newRoutes.push({ ...newRoutes[0], unique: newRoutes[0].path, path: '' });
 
 			newRoutes.push({
 				path: `**`,