fix: Query in path (#19087)

* fix: Query in path

Fix mistaken add of query
parameters into the route
breaking route resolution
when navigating thrhough link.

part of #19080

* update path normalizing, fix server replace state to use location

* change replace order

flow-server/src/main/java/com/vaadin/flow/component/UI.java

@@ -1812,7 +1812,7 @@ public void browserNavigate(BrowserNavigateEvent event) {
             // acknowledge client, but cancel if session not open
             serverConnected(
                     !getSession().getState().equals(VaadinSessionState.OPEN));
-            replaceStateIfDiffersAndNoReplacePending(event.route, trimmedRoute);
+            replaceStateIfDiffersAndNoReplacePending(event.route, location);
         }
     }
 
@@ -1822,15 +1822,15 @@ public void browserNavigate(BrowserNavigateEvent event) {
      *
      * @param route
      *            the event.route
-     * @param trimmedRoute
-     *            the trimmed route
+     * @param location
+     *            the location with the trimmed route
      */
     private void replaceStateIfDiffersAndNoReplacePending(String route,
-            String trimmedRoute) {
-        if (!trimmedRoute.equals(route) && !getInternals()
+            Location location) {
+        if (!location.getPath().equals(route) && !getInternals()
                 .containsPendingJavascript("window.history.replaceState")) {
             // See InternalRedirectHandler invoked via Router.
-            getPage().getHistory().replaceState(null, trimmedRoute);
+            getPage().getHistory().replaceState(null, location);
         }
     }
 

flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -131,10 +131,10 @@ function vaadinRouterGlobalClickHandler(event) {
     }
 
     // if none of the above, convert the click into a navigation event
-    const {pathname, href, baseURI, search, hash} = anchor;
+    const {href, baseURI, search, hash} = anchor;
     // Normalize away base from pathname. e.g. /react should remove base /view from /view/react
-    let normalizedPathname = href.slice(0, baseURI.length) == baseURI ? href.slice(baseURI.length) : pathname;
-    normalizedPathname = normalizedPathname.startsWith("/") ? normalizedPathname: "/" + normalizedPathname;
+    let normalizedPathname = href.replace(search,'').replace(baseURI, '').replace(hash, '');
+    normalizedPathname = normalizedPathname.startsWith("/") ? normalizedPathname : "/" + normalizedPathname;
     if (fireRouterEvent('go', {pathname: normalizedPathname, search, hash, clientNavigation: true})) {
         event.preventDefault();
         // for a click event, the scroll is reset to the top position.
@@ -158,9 +158,10 @@ function navigateEventHandler(event) {
         event.preventDefault();
     }
     // Normalize path against baseURI if href available.
-    let normalizedPathname = event.detail.href && event.detail.href.slice(0, document.baseURI.length) == document.baseURI ?
-        event.detail.href.slice(document.baseURI.length) : event.detail.pathname;
-    normalizedPathname = normalizedPathname.startsWith("/") ? normalizedPathname: "/"+normalizedPathname;
+    let normalizedPathname = event.detail.href ?
+        event.detail.href.replace(event.detail.search ,'').replace(document.baseURI, '').replace(event.detail.hash, '') :
+        event.detail.pathname;
+    normalizedPathname = normalizedPathname.startsWith("/") ? normalizedPathname : "/" + normalizedPathname;
 
     // @ts-ignore
     let matched = matchRoutes(Array.from(routes), normalizedPathname);
@@ -187,8 +188,11 @@ function navigateEventHandler(event) {
                         navigation(path, {replace: false});
                     },
                     continue: () => {
-                        if(window.location.pathname !== event.detail.pathname) {
-                            window.history.pushState(window.history.state, '', event.detail.pathname);
+                        let path = event.detail.pathname;
+                        if(event.detail.search) path += event.detail.search;
+                        if(event.detail.hash) path += event.detail.hash;
+                        if(window.location.pathname !== path) {
+                            window.history.pushState(window.history.state, '', path);
                             window.dispatchEvent(new PopStateEvent('popstate', {state: 'vaadin-router-ignore'}));
                         }
                     }

flow-tests/test-react-router/src/main/java/com/vaadin/flow/NavigationView.java

@@ -20,6 +20,7 @@
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.NativeButton;
 import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.router.QueryParameters;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.router.RouterLink;
 
@@ -28,6 +29,8 @@ public class NavigationView extends Div {
 
     public static final String SERVER_ID = "server-navigation";
     public static final String ANCHOR_ID = "anchor-navigation";
+    public static final String ANCHOR_QUERY_ID = "anchor-query-navigation";
+    public static final String ROUTER_LINK_QUERY_ID = "router-link-query-navigation";
     public static final String ROUTER_LINK_ID = "router-link-navigation";
     public static final String POSTPONE_ID = "postpone-view-link";
 
@@ -64,6 +67,17 @@ public NavigationView() {
         reactServerNavigation.setId(REACT_ID);
 
         add(new Div(), reactAnchorNavigation, new Div(), reactServerNavigation);
+
+        RouterLink rlViewQuery = new RouterLink("AnchorQuery",
+                AnchorView.class);
+        rlViewQuery.setQueryParameters(QueryParameters.of("test", "value"));
+        rlViewQuery.setId(ROUTER_LINK_QUERY_ID);
+        add(new Div(), rlViewQuery);
+
+        Anchor anchorViewQuery = new Anchor(
+                "com.vaadin.flow.AnchorView?test=anchor", "AnchorQuery");
+        anchorViewQuery.setId(ANCHOR_QUERY_ID);
+        add(new Div(), anchorViewQuery);
     }
 
 }

flow-tests/test-react-router/src/test/java/com/vaadin/flow/NavigationIT.java

@@ -26,7 +26,6 @@
 import com.vaadin.flow.testutil.ChromeBrowserTest;
 
 public class NavigationIT extends ChromeBrowserTest {
-
     @Test
     public void testNavigation() {
         open();
@@ -293,4 +292,36 @@ public void testReactNavigationBrowserHistoryBack_serverNavigation() {
                 $(SpanElement.class).first().getText());
     }
 
+    @Test
+    public void testRouterLinkWithQueryNavigation() {
+        open();
+
+        Assert.assertEquals("NavigationView",
+                $(SpanElement.class).first().getText());
+
+        $(AnchorElement.class).id(NavigationView.ROUTER_LINK_QUERY_ID).click();
+        Assert.assertEquals(
+                "Exception on router-link navigation with query parameters",
+                "AnchorView", $(SpanElement.class).first().getText());
+        System.out.println(getDriver().getCurrentUrl());
+        Assert.assertTrue("Query was missing in url",
+                getDriver().getCurrentUrl().endsWith("?test=value"));
+    }
+
+    @Test
+    public void testAnchorWithQueryNavigation() {
+        open();
+
+        Assert.assertEquals("NavigationView",
+                $(SpanElement.class).first().getText());
+
+        $(AnchorElement.class).id(NavigationView.ANCHOR_QUERY_ID).click();
+        Assert.assertEquals(
+                "Exception on router-link navigation with query parameters",
+                "AnchorView", $(SpanElement.class).first().getText());
+        System.out.println(getDriver().getCurrentUrl());
+        Assert.assertTrue("Query was missing in url",
+                getDriver().getCurrentUrl().endsWith("?test=anchor"));
+    }
+
 }